{"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"dist":{"shasum":"50fd99808a00713a02e3146a40f738e8b40a26a3","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115104103.tgz","fileCount":6,"integrity":"sha512-j0la+koL+TP8hsV92NaTJ5m1a0iwBwVuL44fE3tlcfm47r/WQ2fkxEmR5ZM9LL775uU+HOINV00twTTPpLzu6A==","signatures":[{"sig":"MEUCIENNAeZpfG8pi+qJoXk9doLfWFOQrAkgTOrg2bqjO6JkAiEA5ZqhD45JLzlgWMD0Qq77Pnj+k5iIdF4D4Vm7CB6zdoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc2zFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3jxAAlnYozie5sO40JOLQum2pny6d5TYUrTrgZjeU16vpKwhSvL4h\r\niFooyThKqPG7qOasAiIhlAmalh2dttnDh00mHYZn1WEkCNNS+T0gUIPn1Wm4\r\njB/5eIbthFcLxRm+vvxT8ljsbSKwEFalsAC9pwBrKyVCDYp6g85jgiP7kmF9\r\n4kyIwYKko7LA9kmJPk4QloGdkQAn7JSXukN9pGMb9XWgPC2lpKWNYnY9rEuY\r\neXJv+Qll9OtHgpEl/E204gnJQmFvBl7nBLIMCpdsGY1rKdf2+TiUuOKnYxm5\r\nOGtc/gep7A8A+p0a8zqGgwJ9bm9wvx+UvqiYEi2xTB6p/JQEWBbQ7eGPjIHq\r\n6j+PYORdlrEguqM8MhhnVwO8dGRFreCKTQGq/a6XucQxDFUUZNRU8vSVUTBj\r\nATyz+t8f1HUmzndA552Kr59Ex0/XQlemG8twZ+ySowC1StjqCAoQgzIs9GDv\r\nDJFrzoubTK/vy5OmxEXgN/xVvTfdMniJm4tND0EpDEvPirRzh3jwls8NQ174\r\noQ4J4JJMtbX6+MwqwUoZ53JtZpxF1SFOUKKUFNnxt647NmYNMnhGj6FxRyAW\r\n38h++qfBgn5fF6nKpgSSHdPFxhi8WWRTtKMyQ8u4KhL4f4VFGQ3D4BJQWudG\r\nbNhALn03qbiXjTqESOdjvvG7Cz6muftBXts=\r\n=OuKQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","name":"@polymorphic-factory/react","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115104103.tgz","types":"dist/index.d.ts","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"module":"dist/index.esm.js","readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"license":"MIT","scripts":{"dev":"pnpm run build --watch","lint":"eslint --ext .ts,.tsx src","test":"vitest run --reporter verbose --coverage","build":"tsup src/index.ts","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"homepage":"https://github.com/chakra-ui/polymorphic","keywords":[],"_resolved":"/tmp/a37d44e1ed263da20cb3025040cf0532/polymorphic-factory-react-0.0.0-rc-20221115104103.tgz","_integrity":"sha512-j0la+koL+TP8hsV92NaTJ5m1a0iwBwVuL44fE3tlcfm47r/WQ2fkxEmR5ZM9LL775uU+HOINV00twTTPpLzu6A==","repository":{"url":"git+https://github.com/chakra-ui/polymorphic.git","type":"git","directory":"packages/react"},"_npmVersion":"8.19.2","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"sideEffects":false,"_nodeVersion":"18.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"3.2.3","jsdom":"20.0.2","react":"18.2.0","vitest":"0.25.2","react-dom":"18.2.0","typescript":"4.8.4","@types/react":"18.0.25","clean-package":"2.1.2","@types/react-dom":"18.0.9","@vitest/coverage-c8":"0.25.2","@vitejs/plugin-react":"2.2.0","@testing-library/react":"13.4.0","@testing-library/jest-dom":"5.16.5","@types/testing-library__jest-dom":"5.14.5"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.0-rc-20221115104103_1668508868902_0.1611872930889251","host":"s3://npm-registry-packages"},"_id":"@polymorphic-factory/react@0.0.0-rc-20221115104103","version":"0.0.0-rc-20221115104103"}