{"_id":"@banyudu/react-shadow-dom-retarget-events","_rev":"1-c812daa1e810955e35139347d8360866","name":"@banyudu/react-shadow-dom-retarget-events","dist-tags":{"latest":"1.0.11"},"versions":{"1.0.11":{"name":"@banyudu/react-shadow-dom-retarget-events","version":"1.0.11","description":"Retargets event in a shadow root to react","main":"index.js","repository":{"type":"git","url":"git+https://github.com/banyudu/react-shadow-dom-retarget-events.git"},"author":{"name":"Lukas Bombach","email":"lukas.bombach@googlemail.com"},"license":"MIT","gitHead":"c582d8556dba48d8b41f696702edecceb736509d","bugs":{"url":"https://github.com/banyudu/react-shadow-dom-retarget-events/issues"},"homepage":"https://github.com/banyudu/react-shadow-dom-retarget-events#readme","_id":"@banyudu/react-shadow-dom-retarget-events@1.0.11","_nodeVersion":"12.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XnTP+W+PeWkqOMyCOz58xEEtmvM/aFPs+IrniHzINnUdstLrjhbLCGBOYv93F2XxOwXKrm79J2p1wLoPlY0G6w==","shasum":"ebd713d9929fe90a39af6c5b6c3dc173245c3a5d","tarball":"https://registry.npmjs.org/@banyudu/react-shadow-dom-retarget-events/-/react-shadow-dom-retarget-events-1.0.11.tgz","fileCount":3,"unpackedSize":6206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4wZTCRA9TVsSAnZWagAA1HgP/jeqJl+1A5jm5Z+VJ0c0\nUzjNQnBzT6ajD7xijjJTwHY95QawvztbUsMqA1wC95JhCQamb1YEPnO1NQsA\nB5KQL1I+LpoE7l1XXb+JyqbizxpkABOV+bK395k6209MIFVjbRXJY+F3ilZ1\nOkoTTOyYegIMDw5XTMwnoWykkBEKoVN3v106EMH0X7XDoe7/YEX/U3aPFURN\nqEU20gedM+yXn6Biyy+LS+1iz5cGJ8HUC9ovXpGNns7PK6cbCDuvK7pKEj0m\nOOJ6rRyn3vSaIsP9U2stDHlO+/cfX082+QRWTA9uLy6Co2r0A1wm8icg24ZD\niradU6k/lHlu8tKRX7XC+FV4cwib1clRH5aZZvIE1uS6Ivt0RNg9y5Iwo3X8\njZVet0Nqbssa4Zd8pwe5R9u3g8jLBet0CcARdZCwR8fjL7W2hL4mFL18dVlR\nWcX2BV1tpBkSe+dTpL9NfMnOk7swpIB1BbA59yj7BjifKsH6cjDZp6weukPi\njRPinR7yjHh+MgKQZEN3WB4Mr4Ub6L9nBkdS2aEp7Fu6vxxrG487OeAy+B4S\n92Zc2gVLJwyGYxi6Us/m1QSvsZjWNJyVETg4ZxyL7DaePDOgbC+rW8460DS/\n0/X6qY/F1OT1oC2zrgorCdh0bFoXZXlK5tULKr+38xxawtM3YHNk41Ddzulk\n61ts\r\n=sRon\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEF0YTbafU/d+9m2Bv2XD2RASeXiDyH7Bz81ACtHWqUAiAN6nqn1tOO62mr6eStFy2N1qRgLFaR9z2V4tjUnB0i2g=="}]},"_npmUser":{"name":"banyudu","email":"banyudu@gmail.com"},"directories":{},"maintainers":[{"name":"banyudu","email":"banyudu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-shadow-dom-retarget-events_1.0.11_1608713810801_0.859163003078546"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-23T08:56:50.750Z","1.0.11":"2020-12-23T08:56:50.977Z","modified":"2022-04-04T17:42:42.226Z"},"maintainers":[{"name":"banyudu","email":"banyudu@gmail.com"}],"description":"Retargets event in a shadow root to react","homepage":"https://github.com/banyudu/react-shadow-dom-retarget-events#readme","repository":{"type":"git","url":"git+https://github.com/banyudu/react-shadow-dom-retarget-events.git"},"author":{"name":"Lukas Bombach","email":"lukas.bombach@googlemail.com"},"bugs":{"url":"https://github.com/banyudu/react-shadow-dom-retarget-events/issues"},"license":"MIT","readme":"# react-shadow-dom-retarget-events\n\n## What it does\n\nFixes events for react components rendered in a `shadow dom`.\n\n## Why\n\nWhen you render a react component inside `shadow dom` events will not be dispatched to react. \nI.e. when a user clicks in your react component nothing happens. This happens (or does not happen) with any events.\n \nA bug is filed at [#10422](https://github.com/facebook/react/issues/10422).\n\n## How to fix it\n\nLuckily someone wrote [a workaround on Stack Overflow](https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom).\nIt works by adding vanilla JS event listeners and dispatching events to React.\n\nThis repo is based on his answer in an npm module.\n\n## Installation\n\n`yarn add react-shadow-dom-retarget-events` or\n\n`npm install react-shadow-dom-retarget-events --save`\n\n## Usage\n\nimport `retargetEvents` and call it with the `shadowRoot`:\n\n```jsx\nimport React from 'react';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\n\nclass App extends React.Component {\n  render() {\n  \treturn <div onClick={() => alert('I have been clicked')}>Click me</div>;\n  }\n}\n\nconst proto = Object.create(HTMLElement.prototype, {\n  attachedCallback: {\n    value: function() {\n      const mountPoint = document.createElement('span');\n      const shadowRoot = this.createShadowRoot();\n      shadowRoot.appendChild(mountPoint);\n      ReactDOM.render(<App/>, mountPoint);\n      retargetEvents(shadowRoot);\n    }\n  }\n});\ndocument.registerElement('my-custom-element', {prototype: proto});\n```\n## History\n\n* v1.08 Support for cancelBubble and FireFox's composedPath\n* v1.07 Support for onBlur\n* v1.06 Support von React 16, Added Events, Code Cleanup\n* v1.05 Initial commits and basic functionality\n","readmeFilename":"README.md"}