{"_id":"@auroratide/tagify","_rev":"1-382a9fe70c5c026fb9fc6c2b34ade677","name":"@auroratide/tagify","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@auroratide/tagify","version":"0.1.0","description":"Higher-order component for adding HTML5 tagnames to a component","keywords":["react","html5","tags","accessibility"],"main":"index.js","scripts":{"test":"jest examples","test:one":"jest","prepublishOnly":"npm run test"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"repository":{"type":"git","url":"git+https://github.com/Auroratide/tagify.git"},"license":"ISC","devDependencies":{"@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","@testing-library/react":"^8.0.1","babel-jest":"^24.8.0","jest":"^24.8.0","react":"^16.9.0-alpha.0","react-dom":"^16.9.0-alpha.0"},"peerDependencies":{"react":"16.x"},"gitHead":"c7bfabd1f4583be6c839b9f874c7672996cb7f9b","bugs":{"url":"https://github.com/Auroratide/tagify/issues"},"homepage":"https://github.com/Auroratide/tagify#readme","_id":"@auroratide/tagify@0.1.0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-yMcP9zWdIMzIerGnBQPqpOhsUfG61FZKE9QrBWAN8F17t8+Cq1UGAjegNn+EUMfMNcYLqELITKOpM4mhYpTcNQ==","shasum":"e8c1504e40152274a359b5bc03973e230b3a0abe","tarball":"https://registry.npmjs.org/@auroratide/tagify/-/tagify-0.1.0.tgz","fileCount":4,"unpackedSize":6506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/xq8CRA9TVsSAnZWagAAnbwP/ioNlpVMXdr1a3C+SRD7\ngUhHW07v4dMHdGO9XHnyBqAb1GPwh68ZnvWZKK2TmHqYOf/smzoxzQT//Kt9\nfB7g3pfShLfZo8aehDeXQEAnNnKgjeVKOUahV4DNKQMaTneo+ZnDDJI7+WdA\nuj9Z8bC++qEPOYk2qpxVH1AkLB+fyIstNok2sy6S5sUPh74bwb4CT73sobps\nDjqhVvTZSQC7UJI1s0AdN/eiU2Yny4WsHQWgKQHnbruHxp5HfNeJb1vVcAXN\nwZ6uLKMXgqJjlHzE8+kXKJAi9qVRczJgZs8jbwK03H5CO9uqUTzCEVqL/aa+\nq1TKhXZiTI4lMrQj7NnCEViSjHBNESmsrV4CDsFH3YezYg+fEb0TsWEIzt4c\nS24a703Oudt261pyChiRcUOUChpFn7l3TEjVSltbe02bfk6IXAz+8d9Trx7d\nyc4vBB6N/NID7Xhvnt6/Ig/XfmiVlvtLoOgsNO2IpjxPaXs/lWj655KlOKII\nrkkgYdwafzvf1dh2QN5zpPyDk7MRg+pzCz5vjtQ4YVNVQI+uibU/ld/QJBFc\nfth3MsNcWJssrApmJkWTF3x6FdA0LVm1oA/vZE6XD5HxjJuszLKmXDQIZdOz\nZ1AhrnhqmhjeNJ720BpP9D15njpUap9k78IzfP0eqAZncjsy6NJgppJBi+Px\nOwaI\r\n=jBRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgr01y5au4n5MknlfMIsRtUoX65vzwLVgIDsElCCrhtwIhAJTIlW4VZyvZmtsTfQEuc/J1isoA8/t2Ou9sg2iWj15K"}]},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tagify_0.1.0_1560222395859_0.7751490501512333"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-11T03:06:35.816Z","0.1.0":"2019-06-11T03:06:36.009Z","modified":"2022-04-04T16:29:02.128Z"},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"description":"Higher-order component for adding HTML5 tagnames to a component","homepage":"https://github.com/Auroratide/tagify#readme","keywords":["react","html5","tags","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Auroratide/tagify.git"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"bugs":{"url":"https://github.com/Auroratide/tagify/issues"},"license":"ISC","readme":"# tagify\n\n**tagify** is a simple Higher-Order Component that allows you to succinctly define what HTML tag a component should use.\n\nLet's say you have a generic `Container` component which just adds the `container` class name to the element and defines some CSS. You could make the component always be a `div`, but we're big fans of accessibility, so we wanna use those nice and juicy _semantic tags_. Wouldn't it be nice if we could just do this?\n\n```jsx\nconst Page = () =>\n <>\n \n My Website\n \n \n This is the world's greatest website.\n \n \n Because it's so simple, it has no bugs.\n \n \n```\n\nWell, with **tagify** you can!\n\n## How to use\n\nThree simple steps:\n\n1. Define your component to take a dynamic tag\n2. Apply the **tagify** higher-order component\n3. Use your new component with joy!\n\n### 1) Define your component to take a dynamic tag\n\n`Tag` will become a prop on your component, provided by the `tagify` function in Step 2.\n\n```jsx\nconst MyComponent = ({ Tag, children, ...props }) =>\n \n {children}\n ;\n```\n\n_Note: There's nothing related to the tagify library in this step!_\n\n### 2) Apply the tagify higher-order component\n\n```js\nimport tagify from '@auroratide/tagify';\n\ntagify(MyComponent)\n```\n\n### 3) Use your new component with joy!\n\n```jsx\n\n This component is awesome.\n\n```\n\n## Options\n\nYou can specify some additional options as a second parameter to the `tagify` function. Here are the allowed options:\n\n```\n{\n include: [ List of tag names as strings ],\n exclude: [ List of tag names as strings ],\n default: string\n}\n```\n\n### Include List\n\nUse the `include` option to specify a list of tags the component will use. All other tags will be excluded.\n\n```jsx\nimport tagify, { tags } from '@auroratide/tagify';\n\ntagify(MyComponent, {\n include: [ tags.article, tags.section ]\n});\n\n// Valid\n\n\n// Invalid\n\n```\n\n### Exclude List\n\nUse the `exclude` option to specify a list of tags the component should _not_ use. All other tags will be included. Yep, it's the opposite of the include list!\n\n```jsx\nimport tagify, { tags } from '@auroratide/tagify';\n\ntagify(MyComponent, {\n exclude: [ tags.ul, tags.ol ]\n});\n\n// Valid\n\n\n// Invalid\n\n```\n\n### Default Tag\n\nUse the `default` option to specify a tag that should be used when one isn't specified.\n\n```jsx\nimport tagify, { tags } from '@auroratide/tagify';\n\ntagify(MyComponent, {\n default: tag.div\n});\n\n// Will use tag\n\n```","readmeFilename":"README.md"}