{"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"dist":{"shasum":"c5dd30fdf42abd5f8806c30a48856a1a1c62fd18","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230401170648.tgz","fileCount":6,"integrity":"sha512-XpUX6Y+9YsCujXUCf7y1+bXJHAD41PuHuK+ULXx/wY3YTjHFnrqXZmAp6T7P90ls4nJN3CD1+wrmiJg54fYTmw==","signatures":[{"sig":"MEQCICyUyDnoSYDuYCceKcf04Sv0FedeUcEb8npi1DOQrXJ2AiAwl8203KSHNoCkofCS7VnYzVUV7cnyp/ZxHXTM9v1kUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKGSvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNlw/8DL47meUS3TWBUt3U4JvjFhsCZTP2nk3w/NdfNdxXoZ+dUEsc\r\nPGztxjYFy/ecOeKoOrLbnzohx7wh4VDyIXHBu61sJfXsRzMyR8dVkejHEqGY\r\nJ66/v4YteZXgL6zd12Mly+TWZuwSJqHJRnYYNO1xvyvvfp9rgab+Jg8W8VT0\r\nEfyfBnBhrWdRkul8HeQgQE20OGH+VjAQ9o6reTNLb/5JmrWvCGVIHiKTFrl0\r\n3GM+jN22j23WiT3JouQegipPp9spCtJVChwFSuIBLH4WJmlLZuiej3OvSAgK\r\nHncxS9CW0aLbopV+IXBGSdZLubxnraXcEQo1ML5IaoL4Zn3RZKt/O4wVjI6K\r\nBK1Izx3EzRIpNKfFd0Xyhjmw7+PwhwRWqUblTzuoYatOWFLd7+3uqE2uYiss\r\nEqc4oH2Z1xMCPTw2pg5DngceQ+ZQByXFYjRGu1UggGp5+4EUFNzJ2ZC9n16Y\r\ndMqXsFny3HhQHHeC86vg/TBdPoG+aYYCEEDj3E4A0upvlAYpcFauVn9R96c0\r\ndYm1qUUf6zBtmZMWAogRO/HXL5S98qsejuzgLhg/rPXBS4ImXcptkedguNEh\r\npN1g6xYZOl2lAbfR12lLUkYmUPRkO9ZGn3XpAf0yHV4V1YMNLHD+RlDa4afm\r\nZVQRh8Vwl+9gv9fnxG6BDO9j5PEMp9G3GeE=\r\n=dqZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@polymorphic-factory/react","_from":"file:polymorphic-factory-react-0.0.0-rc-20230401170648.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/0572f090beab16fd721418ccc5a1df27/polymorphic-factory-react-0.0.0-rc-20230401170648.tgz","_integrity":"sha512-XpUX6Y+9YsCujXUCf7y1+bXJHAD41PuHuK+ULXx/wY3YTjHFnrqXZmAp6T7P90ls4nJN3CD1+wrmiJg54fYTmw==","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":"5.0.3","@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-20230401170648_1680368815781_0.7519682704488126","host":"s3://npm-registry-packages"},"_id":"@polymorphic-factory/react@0.0.0-rc-20230401170648","version":"0.0.0-rc-20230401170648"}