{"_id":"@cobreti/r2wc","_rev":"3-a5671074d04979ceb0712385b2a23d25","name":"@cobreti/r2wc","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.4":{"name":"@cobreti/r2wc","version":"0.0.4","license":"MIT","keywords":["React","Web Component"],"type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js","types":"./dist/index.d.ts"},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"devDependencies":{"@types/node":"^20.1.1","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@typescript-eslint/eslint-plugin":"^5.57.1","@typescript-eslint/parser":"^5.57.1","eslint":"^8.38.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","typescript":"^5.0.2","vite":"^4.3.2","vite-plugin-dts":"^2.3.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"gitHead":"ea099456d6bd77c3c90ada2b56d9aeb57d0e8419","description":"## Basic Use 🚀","_id":"@cobreti/r2wc@0.0.4","_nodeVersion":"20.3.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-AfL0VFstV4C98G6RJIRudBRWyhVMStJzHGm9TKvgOo675BY1NP5ffYKUallMASpLycoEXEhL2JzlbqeYzN1DCA==","shasum":"71bc7c61a0f7d15054fce9ab447faed061306cb0","tarball":"https://registry.npmjs.org/@cobreti/r2wc/-/r2wc-0.0.4.tgz","fileCount":20,"unpackedSize":20946,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2NOfzGbu95wB54jDgc81a6kpj2N3H9GwqILnYHxaslAIgYiU+GTie/1yf/XNcoJuLIeGnmdwefJxgcXw92T2fEEI="}]},"_npmUser":{"name":"cobreti","email":"cobreti_@hotmail.com"},"directories":{},"maintainers":[{"name":"cobreti","email":"cobreti_@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r2wc_0.0.4_1696273168679_0.22776043816925862"},"_hasShrinkwrap":false},"0.0.5":{"name":"@cobreti/r2wc","version":"0.0.5","license":"MIT","keywords":["React","Web Component"],"type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js","types":"./dist/index.d.ts"},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"devDependencies":{"@types/node":"^20.1.1","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@typescript-eslint/eslint-plugin":"^5.57.1","@typescript-eslint/parser":"^5.57.1","eslint":"^8.38.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","typescript":"^5.0.2","vite":"^4.3.2","vite-plugin-dts":"^2.3.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"gitHead":"ea099456d6bd77c3c90ada2b56d9aeb57d0e8419","description":"## Basic Use 🚀","_id":"@cobreti/r2wc@0.0.5","_nodeVersion":"20.3.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-UqgfL25EHDiU6Mx7KJqiNqh4ZcWEyznzVSPnqOeuaeYcOAqTBuENKK5RRI59X6ziOn8DeE/GbbzMlCVuua2F5Q==","shasum":"79f5ace0152e180d3df04738163274b3d87e256b","tarball":"https://registry.npmjs.org/@cobreti/r2wc/-/r2wc-0.0.5.tgz","fileCount":20,"unpackedSize":21484,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUDAAC0U34gfKShq0xEUc+eBbwl3FO1OJvUTcjRAqOcgIgGXCFzUm4zGATfKsAyUVy5S8Bs+ZHi2TxI573y3+efsk="}]},"_npmUser":{"name":"cobreti","email":"cobreti_@hotmail.com"},"directories":{},"maintainers":[{"name":"cobreti","email":"cobreti_@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r2wc_0.0.5_1696273659971_0.787229218251372"},"_hasShrinkwrap":false},"0.0.6":{"name":"@cobreti/r2wc","version":"0.0.6","license":"MIT","keywords":["React","Web Component"],"type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js","types":"./dist/index.d.ts"},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"devDependencies":{"@types/node":"^20.1.1","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@typescript-eslint/eslint-plugin":"^5.57.1","@typescript-eslint/parser":"^5.57.1","eslint":"^8.38.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","typescript":"^5.0.2","vite":"^4.3.2","vite-plugin-dts":"^2.3.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"gitHead":"21b7c049d64102dcced6c484a234d944f8e8682f","description":"## Basic Use 🚀","_id":"@cobreti/r2wc@0.0.6","_nodeVersion":"20.3.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-FK2OUzjv/mkJ6xCTvGV1pRhu5z/iyOJXs6vb24RYh/w5db3ocwO8NFXfPtR1uduADUkk/+YUL0fOgFbnaZmB7Q==","shasum":"525f101477691e98807bfb95b55fee0bb7076bed","tarball":"https://registry.npmjs.org/@cobreti/r2wc/-/r2wc-0.0.6.tgz","fileCount":20,"unpackedSize":21799,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVVqpLhs3aWTVLKoVqj3ny26FN8WUJQb9Rt4VpZ1XIAAiEA/EMJmLSmAd8Uw8AMnmwg2IG7ROxLU8XhZNuKdFmDPGc="}]},"_npmUser":{"name":"cobreti","email":"cobreti_@hotmail.com"},"directories":{},"maintainers":[{"name":"cobreti","email":"cobreti_@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r2wc_0.0.6_1696274972400_0.2825095789909786"},"_hasShrinkwrap":false},"0.0.7":{"name":"@cobreti/r2wc","version":"0.0.7","license":"MIT","keywords":["React","Web Component"],"type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js","types":"./dist/index.d.ts"},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"devDependencies":{"@types/node":"^20.1.1","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@typescript-eslint/eslint-plugin":"^5.57.1","@typescript-eslint/parser":"^5.57.1","eslint":"^8.38.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","typescript":"^5.0.2","vite":"^4.3.2","vite-plugin-dts":"^2.3.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"gitHead":"c827efb96a64305973cdf794d3fe1798fa77cbf7","description":"## Basic Use 🚀","_id":"@cobreti/r2wc@0.0.7","_nodeVersion":"20.3.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-0+r2vk9SxkKqmTDA/ocYRqhD+gKYUu0J26fRHrubB0kLJxVs/h91Fj1zvXa12nM1rDQzGY9epNleqbwTSrg0ag==","shasum":"bcb6ea254bca5b0ad18df9aea72d9ba4c7c38f85","tarball":"https://registry.npmjs.org/@cobreti/r2wc/-/r2wc-0.0.7.tgz","fileCount":20,"unpackedSize":22819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8s9CTAuU5ycuYqy7OuIvOWBZdtJP2FD+t1AcbkHzf0wIgKjKw9mNGWV0HcLTuK5cjc+pjANyfg403DyHOVNUyaLY="}]},"_npmUser":{"name":"cobreti","email":"cobreti_@hotmail.com"},"directories":{},"maintainers":[{"name":"cobreti","email":"cobreti_@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r2wc_0.0.7_1697738028076_0.5197475364977973"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-02T18:59:28.601Z","0.0.4":"2023-10-02T18:59:28.880Z","modified":"2023-10-19T17:53:48.462Z","0.0.5":"2023-10-02T19:07:40.140Z","0.0.6":"2023-10-02T19:29:32.588Z","0.0.7":"2023-10-19T17:53:48.300Z"},"maintainers":[{"name":"cobreti","email":"cobreti_@hotmail.com"}],"description":"## Basic Use 🚀","keywords":["React","Web Component"],"license":"MIT","readme":"# R2WC 🎯\n\n## Basic Use 🚀\n\nFor basic usage, we will use this simple React component:\n\n```js\nconst Greeting = () => {\n  return <h1>Hello, World!</h1>;\n};\n```\n\nWith our React component complete, all we have to do is call `r2wc` and [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) to create and define our custom element:\n\n```js\nimport { r2wc } from \"r2wc\";\n\nconst WebGreeting = r2wc(Greeting);\n\ncustomElements.define(\"web-greeting\", WebGreeting);\n```\n\nNow we can use `<web-greeting>` like any other HTML element!\n\n```html\n<body>\n  <h1>Greeting Demo</h1>\n\n  <web-greeting></web-greeting>\n</body>\n```\n\n## Working with Attributes\n\nBy default, custom elements created by `r2wc` only pass properties to the underlying React component. To make attributes work, you must specify your component's props.\n\n```js\nconst Greeting = ({ name }) => {\n  return <h1>Hello, {name}!</h1>;\n};\n\nconst WebGreeting = r2wc(Greeting, {\n  props: {\n    name: \"string\",\n  },\n});\n```\n\nNow `r2wc` will know to look for `name` attributes\nas follows:\n\n```html\n<body>\n  <h1>Greeting Demo</h1>\n\n  <web-greeting name=\"Justin\"></web-greeting>\n</body>\n```\n\n## Working with complex attributes and functions callback\n\n#### React component\n\n```jsx\nconst component = r2wc(App, {\n  props: {\n    onCountUpdated: \"function\",\n    title: \"string\",\n    complex: \"json\",\n  },\n});\ncustomElements.define(\"app-component\", component);\n```\n\n#### React consumer\n\n```jsx\nfunction App() {\n  useScript(\"http://localhost:3000/index.es.js\");\n\n  const [count, setCount] = useState(0);\n  const func = (count: number) => {\n    setCount(count);\n  };\n  const [title, setTitle] = useState(\"\");\n  const [complex, setComplex] = useState({\n    name: \"\",\n    value: \"\",\n  });\n\n  useEffect(() => {\n    setTitle(count % 2 === 0 ? \"Foo\" : \"Bar\");\n    setComplex({\n      name: `Counter is: ${count}`,\n      value: `Value: ${count}`,\n    });\n  }, [count]);\n\n  return (\n    <>\n      <h2>Consumer</h2>\n      <app-component\n        onCountUpdated={func}\n        title={title}\n        complex={complex}\n      ></app-component>\n    </>\n  );\n}\n```\n\n#### Vanilla js\n\n```html\n<body>\n  <div id=\"root\">\n    <h2>Consumer</h2>\n    <app-component\n      id=\"app\"\n      on-count-updated=\"onUpdated\"\n      title=\"\"\n      complex=\"{}\"\n    ></app-component>\n  </div>\n\n  <script>\n    window.onload = () => {\n      onUpdated(0);\n    };\n\n    const app = document.getElementById(\"app\");\n\n    function onUpdated(count) {\n      console.log(count);\n\n      app.props = {\n        title: count % 2 === 0 ? \"Foo\" : \"Bar\",\n        complex: {\n          name: `Counter is: ${count}`,\n          value: `Value: ${count}`,\n        },\n      };\n    }\n  </script>\n  <script src=\"http://localhost:3000/index.es.js\"></script>\n</body>\n```\n\n## working with CSS / SCSS\n\nIt's possible to use css styles (as string).  When styles present, it will be added as a style element under the shadow-root.\n\n```\nimport styles from './header.scss?inline'; // ?inline is a vitejs attribute to get the content as a string\n\nconst component = r2wc(App, {\n  styles\n});\n```\n\n## Setup 🔨\n\nTo install from npm:\n\n```\nnpm install r2wc\n```\n\n## Contributing 🙏\n\nContributions are always welcome!\n\n## FAQ ？\n\nBased on https://github.com/bitovi/react-to-web-component\n\n## License ⚖️\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","readmeFilename":"README.md"}