{"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"dist":{"shasum":"373823141fbab318fc0fd103362d141d503c1369","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230401134208.tgz","fileCount":6,"integrity":"sha512-RgdQkZhesDswWRdq6XZ8cYNwuULshY9dylAJHC3L5+W7ofZVA9ZR2vajcy9X05KkzMZj83jm3dHwvflsAyRR8w==","signatures":[{"sig":"MEYCIQD6ThhlREHvxoMxdBnEt0tICdwN6SGKrWsuleNzHytV4wIhANLndR426cHDGoidrOvfKfeasDt6Uzw5lBnksRkzz9Qs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKDS3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHQg/+I6JncBUlBvnfA+1nuloFkwhA617uoUzr9asAg/+LWinnULaT\r\nYrTghHYHZ7ZstLSIMVbCYrKnoE6NO4hjPvhFGUdmaUfSDRWRVA1z5c05iNhA\r\nCD2AfvsHVRI6zjTQq43np6KJqsO4p+6Ec8nrSgFGwsf3m4lCxxzYs/MgIVhD\r\nchI6FxbsTVso+4fa7Hv8RxaAIkvjbVI4j4ugLY/uPofgIITTxdLdv1ERr+rQ\r\n3YRzdl0Vxhb/C0iYYd1PXsrhNjd5zbWeUf2YLEsNACwCmkjMmEib7mDcO4vl\r\nN0c1ZmWHcV3e5UYdi2vWjNWfROr1M+TpxE/Ip8satQYygCX9FDeGHkNW3t1h\r\nNZNG8EEM6dBxlvqrIkmFfxdwvxsvlMMHQVAnNS3J/LB6QXIo+Ko71Z4wzBi6\r\nB3jz6ntsHvcLYVzwWtRnolniunuTQsgiAhmCg1EfA4A8sKA5h6l4vMHFKCcw\r\nqsjlqt0PdFkFF5upRrp+4fHWJmBn71V0ku1dyhJYCDtMPYvShlyKHKamBwqv\r\n+Cv8jIpj5PH6lfDPXdx2SVGhGqIcba0zdWgRY2m1OrWqSrIaL0J3MZIAxSnH\r\n/3GxEBPdN5DMNc9kRWv0uqYT92xAK4LEJT2ao9858OyWYveYuSrOz6kwIRET\r\nVoC4nYxoj7OdOAje/oTqQBzLFxUEGT6dazk=\r\n=Yj7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@polymorphic-factory/react","_from":"file:polymorphic-factory-react-0.0.0-rc-20230401134208.tgz","types":"dist/index.d.ts","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"module":"dist/index.mjs","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. This is useful\nfor component libraries that want to provide a consistent API for their users and want to allow them\nto customize the underlying element.\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## Refs\n\nYou can use `ref` on the component, and it will have the correct typings.\n\n```tsx\nconst App = () => {\n  const ref = React.useRef<HTMLAnchorElement>(null)\n  return <poly.button as=\"a\" ref={ref} />\n}\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":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.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":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"_resolved":"/tmp/403ff1d9a2656e4c96755187d562e69b/polymorphic-factory-react-0.0.0-rc-20230401134208.tgz","_integrity":"sha512-RgdQkZhesDswWRdq6XZ8cYNwuULshY9dylAJHC3L5+W7ofZVA9ZR2vajcy9X05KkzMZj83jm3dHwvflsAyRR8w==","repository":{"url":"git+https://github.com/chakra-ui/polymorphic.git","type":"git","directory":"packages/react"},"_npmVersion":"9.5.0","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"sideEffects":false,"_nodeVersion":"18.15.0","clean-package":"../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"4.2.1","jsdom":"21.1.1","react":"18.2.0","vitest":"0.29.8","csstype":"3.1.1","react-dom":"18.2.0","typescript":"4.9.5","@types/react":"18.0.31","clean-package":"2.2.0","@types/react-dom":"18.0.11","@vitest/coverage-c8":"0.29.8","@vitejs/plugin-react":"3.1.0","@testing-library/react":"14.0.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-20230401134208_1680356534850_0.2558637037887803","host":"s3://npm-registry-packages"},"_id":"@polymorphic-factory/react@0.0.0-rc-20230401134208","version":"0.0.0-rc-20230401134208"}