{"_id":"@degjs/storybook-decorator-react-to-html","_rev":"4-469753c68e0495ad387fcc059facedbe","name":"@degjs/storybook-decorator-react-to-html","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@degjs/storybook-decorator-react-to-html","version":"1.0.0","description":"A Storybook decorator for rendering a React component to static HTML","main":"index.js","scripts":{"test":"jest"},"keywords":["storybook","react","html"],"author":{"name":"Ryan Heap","email":"heaper@gmail.com"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/DEGJS/storybook-decorator-react-to-html.git"},"bugs":{"url":"https://github.com/DEGJS/storybook-decorator-react-to-html/issues"},"publishConfig":{"access":"public"},"dependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"peerDependencies":{"react":"^16.13.1"},"devDependencies":{"@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","babel-jest":"^26.2.2","jest":"^26.2.2","react":"^16.13.1"},"gitHead":"00c4a848e57ac7409586e560006c1bb4b2bc5a19","homepage":"https://github.com/DEGJS/storybook-decorator-react-to-html#readme","_id":"@degjs/storybook-decorator-react-to-html@1.0.0","_nodeVersion":"12.14.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-HBOoR7ZdVQ1DFpK6M1hnMd6jXBYlV0I3KuBJGvmy7YqT3OOioA3BGwbi7cyqMyshzexQg+Oqzli6kH/gEOCsVw==","shasum":"6c900d83c0336218702053749e120edd2baf15b4","tarball":"https://registry.npmjs.org/@degjs/storybook-decorator-react-to-html/-/storybook-decorator-react-to-html-1.0.0.tgz","fileCount":3,"unpackedSize":3394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEJwCRA9TVsSAnZWagAAMVsP/RLdVpvIxg9g5kfACnRb\naphRlhgfD/Bf8RbJSgi6Z51spRgPUShF+JLcdjDuKOJndqSEF8NBsrUrmwOc\nceKarRDvDR0FMqhnAh/kjRffA1vrx/n3Z9AY5cry/4UvPd0JayN1ntpXoQ2y\nvOpm1ZhWb6KgNJcpmgWTw+kZIHW+xba7Q2VVcrHjTAiuP3D65yawLKEYmYi6\nqzo5c04nqEnna5R6W0g0E7/v6amocDQN9iz6byFzQSYZQiIuxZskX+9L+Llg\nX5D0BJHruTCIXKuQGI8BenWphJURZifWA5ofi6+Z76Ce+8s8nH45muHLKX27\n0c5mmKRAiYJSJ1an0f1qCPgrZLxmt14M36C1moR7v2P6+ZEU7Xp597HCKTX6\nUu3QnzVqJkd1NHclJjIm1nTJXuaDr69UdLB3NiJBHllbuIswOV+R2bqo9J1H\neaYRPKhGhQ2PUOkeZV8lYa8fSW5zEAXHj/ZugPeu8eL2B3D2dEc2+Q24fpoU\npi6pIW13m2Cjn0qbxB+7gvgZRZuFr1NagyRWdlWGI5Em9Uf173xlAi0pzEPw\neTxKrUnzV1iePR9zcfoGmigiGcSlD4nwrNDdPzULzxbRzFjuWY900u33Dc/P\noX3Mi0i70ieFMPFxJvtNk/R5aetqdH5CERKYiQoX1D7gualPS0aqaO78KswA\nfJQu\r\n=ed/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoLy5nMZ0Zfa570OTeKF7jeD95zJxUhaED9OuIkOmrrAIgBb03AC0mvfR3+FFx/E60H80rVkHrlmJciR6iV4VP1rQ="}]},"maintainers":[{"name":"alejcerro","email":"alejcerro@gmail.com"},{"name":"kylegeary","email":"kgeary09@gmail.com"},{"name":"scheul93","email":"scheul93@gmail.com"},{"name":"heaper","email":"heaper@gmail.com"},{"name":"briangraves","email":"mail@brianleegraves.com"},{"name":"aladage","email":"aladage@gmail.com"},{"name":"jsmapr1","email":"jsmapr1@gmail.com"},{"name":"jlawhorn","email":"jlawhorn@degdigital.com"},{"name":"designbykhalid","email":"khalid@designbykhalid.com"}],"_npmUser":{"name":"heaper","email":"heaper@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-decorator-react-to-html_1.0.0_1596473968379_0.9013313465445669"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-03T16:59:28.238Z","1.0.0":"2020-08-03T16:59:28.508Z","modified":"2022-04-05T03:39:29.000Z"},"maintainers":[{"email":"heaper@gmail.com","name":"heaper"},{"email":"mail@brianleegraves.com","name":"briangraves"},{"email":"aladage@gmail.com","name":"aladage"},{"email":"jlawhorn@degdigital.com","name":"jlawhorn"},{"email":"khalid@designbykhalid.com","name":"designbykhalid"},{"email":"alejcerro@gmail.com","name":"alejcerro"},{"email":"vequanclark@yahoo.com","name":"vequanc"}],"description":"A Storybook decorator for rendering a React component to static HTML","homepage":"https://github.com/DEGJS/storybook-decorator-react-to-html#readme","keywords":["storybook","react","html"],"repository":{"type":"git","url":"git+https://github.com/DEGJS/storybook-decorator-react-to-html.git"},"author":{"name":"Ryan Heap","email":"heaper@gmail.com"},"bugs":{"url":"https://github.com/DEGJS/storybook-decorator-react-to-html/issues"},"license":"ISC","readme":"# storybook-decorator-react-to-html\nA [Storybook for HTML](https://storybook.js.org/docs/guides/guide-html/) decorator that converts a React component into a static HTML string. If you're wondering why you would ever want to do something like this, read the [React As An HTML Templating Engine](#react-as-an-html-templating-engine) section below.\n\n## Install\n```\nnpm install @degjs/storybook-decorator-react-to-html\n```\n\n## Usage\nAs a global decorator in `.storybook/preview.js` (recommended):\n```js\nimport { addDecorator } from '@storybook/html';\nimport reactToHtml from '@degjs/storybook-decorator-react-to-html';\n\naddDecorator(reactToHtml);\n```\nAs a decorator within a story:\n```js\nimport reactToHtml from '@degjs/storybook-decorator-react-to-html';\nimport Button from './button';\n\nexport default {\n title: 'Button',\n component: Button,\n decorators: [ reactToHtml ]\n}\n```\nYou can then create a component in React:\n```js\nimport React from 'react';\n\nfunction Button({children, isDisabled=false}) {\n return ;\n}\n\nexport default Button;\n```\nAnd feed that React component directly into Storybook for HTML stories:\n```js\nimport React from 'react';\nimport Button from './button';\n\nexport const defaultButton = () => ;\nexport const disabledButton = () => ;\n```\n## React As An HTML Templating Engine\nReact is a robust user interface library, but it can also function in a more limited capacity as a capable HTML templating engine. By outputting components created with React and JSX as static HTML, they can be fed directly into Storybook for HTML stories. The ReactDOMServer package includes a method that does just this: [renderToStaticMarkup](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup). The React to HTML decorator accepts a React component and utilizes the `renderToStaticMarkup` method to return an HTML string.\n\nWriting HTML components in React provides many advantages, including the JSX syntax, props, composition, code reuse, and the full power of JavaScript itself. However, since these components are converted to static HTML, React runtime features such as state management and user interaction callbacks are not applicable.\n","readmeFilename":"README.md"}