{"_id":"react-to-html","_rev":"3-d6075c4956be08e240bbea18c62d83f0","name":"react-to-html","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"react-to-html","version":"0.0.1","description":"A react package to generate HTML for conversion to Email or PDF from shared components","license":"MIT","author":{"name":"Matt Litherland"},"main":"dist/index.js","types":"dist/index.d.ts","type":"module","keywords":["email","html","pdf","react","nextjs"],"scripts":{"build":"tsc","build:html":"ts-node src/build-html.ts"},"bin":{"build-tohtml":"dist/cli.js"},"dependencies":{"@types/html-minifier":"^4.0.5","@types/js-beautify":"^1.14.3","@types/node":"^20.12.7","autoprefixer":"^10.4.19","postcss":"^8.4.38","html-minifier":"^4.0.0","install":"^0.13.0","js-beautify":"^1.15.1","ts-node":"^10.9.2","typescript":"^5.4.4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":"^3.4.3"},"devDependencies":{"@types/react":"^18.2.75","@types/react-dom":"^18.2.24"},"gitHead":"d3902adc17e980025b11b04d9a334db8fb12df91","_id":"react-to-html@0.0.1","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-D/2t0MjVPKFPuBjUw4ZTMZaTeVHEhfzipn28X2sZuCunDZ61w1Nfzb39X6nbTW2JST7QCQjeyJSZR9W6V3e1kg==","shasum":"6427c66e18a7f82e212f57d0508664c7e255fa4e","tarball":"https://registry.npmjs.org/react-to-html/-/react-to-html-0.0.1.tgz","fileCount":26,"unpackedSize":21978,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6lFHaj3AsmSfFkSKj7EGweaFXKhheDGTSs1Cgs2LpNAiEA5NiJBHqaDLvhvHD2zJ0oRYtXRQSSDg6KIafj/RP0AjY="}]},"_npmUser":{"name":"uixmat","email":"mattsince87@gmail.com"},"directories":{},"maintainers":[{"name":"uixmat","email":"mattsince87@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-to-html_0.0.1_1713176120262_0.34935135799214856"},"_hasShrinkwrap":false},"0.0.2":{"name":"react-to-html","version":"0.0.2","description":"A react package to generate HTML for conversion to Email or PDF from shared components","license":"MIT","author":{"name":"Matt Litherland"},"main":"dist/index.js","types":"dist/index.d.ts","type":"module","keywords":["email","html","pdf","react","nextjs"],"scripts":{"build":"tsc","build:html":"ts-node src/build-html.ts"},"bin":{"build-tohtml":"dist/cli.js"},"dependencies":{"@fullhuman/postcss-purgecss":"^6.0.0","@types/html-minifier":"^4.0.5","@types/js-beautify":"^1.14.3","@types/node":"^20.12.7","autoprefixer":"^10.4.19","html-minifier":"^4.0.0","install":"^0.13.0","js-beautify":"^1.15.1","postcss":"^8.4.38","ts-node":"^10.9.2","typescript":"^5.4.4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":"^3.4.3"},"devDependencies":{"@types/react":"^18.2.75","@types/react-dom":"^18.2.24"},"gitHead":"d3902adc17e980025b11b04d9a334db8fb12df91","_id":"react-to-html@0.0.2","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-0UM3ov0klvOyA6CEmJRERQrw8+HpxzKIMtDGcpEcEAnsubbI9gZFzoXV+1R6u+PV2A6m+rqhGApgZghazbkOrw==","shasum":"871ef614b3a2c46be7aae962b1b1fa4f4885d3cc","tarball":"https://registry.npmjs.org/react-to-html/-/react-to-html-0.0.2.tgz","fileCount":26,"unpackedSize":23436,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMrbGsRl+AuMs3LGd3jM79+caZ11oaHOrGpGx4mm7MIgIhAMNZH8bj5UBpijvKXXAeEJIrnK4H0UNCx+8+C/6bT6Qa"}]},"_npmUser":{"name":"uixmat","email":"mattsince87@gmail.com"},"directories":{},"maintainers":[{"name":"uixmat","email":"mattsince87@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-to-html_0.0.2_1713443742860_0.9027726514083874"},"_hasShrinkwrap":false},"0.0.3":{"name":"react-to-html","version":"0.0.3","description":"A react package to generate HTML for conversion to Email or PDF from shared components","license":"MIT","author":{"name":"Matt Litherland"},"main":"dist/index.js","types":"dist/index.d.ts","type":"module","keywords":["email","html","pdf","react","nextjs"],"scripts":{"build":"tsc","build:html":"ts-node src/build-html.ts"},"bin":{"build-tohtml":"dist/cli.js"},"dependencies":{"@fullhuman/postcss-purgecss":"^6.0.0","@types/html-minifier":"^4.0.5","@types/js-beautify":"^1.14.3","@types/node":"^20.12.7","autoprefixer":"^10.4.19","html-minifier":"^4.0.0","install":"^0.13.0","js-beautify":"^1.15.1","postcss":"^8.4.38","ts-node":"^10.9.2","typescript":"^5.4.4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":"^3.4.3"},"devDependencies":{"@types/react":"^18.2.75","@types/react-dom":"^18.2.24"},"gitHead":"79f7c5bd38c1fa580b1037259789535907fb7e6b","_id":"react-to-html@0.0.3","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-DEKPkCFNCP5NbV399sDR/Co5zxDfzh2FLs+Q5+MZ72fZR1Sos/Ls2QFfIbHc+EDfV4fMDAltb3cUmaWNvZ40WQ==","shasum":"8a827456567f86619d64060babcdc643df2f5e36","tarball":"https://registry.npmjs.org/react-to-html/-/react-to-html-0.0.3.tgz","fileCount":26,"unpackedSize":24482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZFqY92v8CPUI4ktEnzkb1pMLsjL7W7YBJnwBmW3CyNAIhAPdm0EAWQdzmi0zeRSj7lqPEBRycq+w2PpPl9kYqqx9V"}]},"_npmUser":{"name":"uixmat","email":"mattsince87@gmail.com"},"directories":{},"maintainers":[{"name":"uixmat","email":"mattsince87@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-to-html_0.0.3_1715171603635_0.5409915770972953"},"_hasShrinkwrap":false},"0.0.4":{"name":"react-to-html","version":"0.0.4","description":"A react package to generate HTML for conversion to Email or PDF from shared components","license":"MIT","author":{"name":"Matt Litherland"},"main":"dist/index.js","types":"dist/index.d.ts","type":"module","keywords":["email","html","pdf","react","nextjs"],"scripts":{"build":"tsc","build:html":"ts-node src/build-html.ts"},"bin":{"build-tohtml":"dist/cli.js"},"dependencies":{"@fullhuman/postcss-purgecss":"^6.0.0","@types/html-minifier":"^4.0.5","@types/js-beautify":"^1.14.3","@types/node":"^20.12.7","autoprefixer":"^10.4.19","html-minifier":"^4.0.0","install":"^0.13.0","js-beautify":"^1.15.1","postcss":"^8.4.38","ts-node":"^10.9.2","typescript":"^5.4.4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":"^3.4.3"},"devDependencies":{"@types/react":"^18.2.75","@types/react-dom":"^18.2.24"},"gitHead":"86dc023305d4e9c2a1fe3bfb7361abe8fea83656","_id":"react-to-html@0.0.4","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-LQawLCitmAyr2MdLgjW4amu12C0fpRvqiO6rPjivcErDuFf769bYquGFmTgfKRuFwTK+YfuSFaB+0q9+cFoBBw==","shasum":"d8982bf8be6f82b0899c25059a7d5c1c9b078135","tarball":"https://registry.npmjs.org/react-to-html/-/react-to-html-0.0.4.tgz","fileCount":26,"unpackedSize":28714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrQsmQ/XtikhN8kHTFhinReWXD+9hJOothmobjXa7P2wIgOjCgpg8B+1+4xQZOqXBXQ0fdT2aIhmso+XRkpg1ZCDs="}]},"_npmUser":{"name":"uixmat","email":"mattsince87@gmail.com"},"directories":{},"maintainers":[{"name":"uixmat","email":"mattsince87@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-to-html_0.0.4_1715247934524_0.07073872130886238"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-15T10:15:20.261Z","0.0.1":"2024-04-15T10:15:20.420Z","modified":"2024-05-09T09:45:34.830Z","0.0.2":"2024-04-18T12:35:43.028Z","0.0.3":"2024-05-08T12:33:23.828Z","0.0.4":"2024-05-09T09:45:34.664Z"},"maintainers":[{"name":"uixmat","email":"mattsince87@gmail.com"}],"description":"A react package to generate HTML for conversion to Email or PDF from shared components","keywords":["email","html","pdf","react","nextjs"],"author":{"name":"Matt Litherland"},"license":"MIT","readme":"## Introduction\nConvert your reusable react components from jsx/tsx directly into HTML. React to html provides you with a way of maintaining one source of truth for your applications components with some added features (avoid using tables and just use Tailwind!).\n\n> Inspired by [react-email](https://) from [@zenorocha](https://twitter.com/zenorocha) & [@bukinoshita](https://twitter.com/bukinoshita).\n\n## Why\nMaintaining a HTML version of your components can be cumbersome and lead to unnoticed differences between two versions of the same thing. You might want to generate a PDF from a HTML version of your component and that's where react-to-html shines.\n\n### Works with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss)\nReact-to-html will automatically compile your tailwindcss into your HTML version for you.\n\n## Getting started\nInstall react-to-html from the command line and setup your config.\n\n```bash\n# nnpm\nnpm i react-to-html\n# pnpm\npnpm add react-to-html\n# yarn\nyarn add react-to-html\n```\n\n### Basic config `tohtml.config.ts`\n```ts\n// tohtml.config.ts\nexports.settings = {\n content: [\n {\n path: './components/Example.tsx',\n props: {\n foo: \"bar\",\n },\n }\n ],\n globalStyles: './app/globals.css',\n pageHeight: '297mm', // A4\n pageWidth: '210mm', // A4\n outputDir: './output',\n outputFormat: 'pretty | minified',\n};\n```\n### Usage\nTo run react-to-html simply run the command or add a script in your own `packages.json`.\n```bash\n# npm\nnpm build:html\n# pnpm\npnpm build:html\n# yarn\nyarn build:html\n```\n\n## Example component\nBelow is an example component using **tailwind** and imported icons from **Lucide**. \n\n> [!IMPORTANT] \n> You cannot use local imports for components you wish to convert to HTML. You should validate your data before passing it as props.\n\n```tsx\nimport React from \"react\";\nimport { ShoppingCartIcon } from \"lucide-react\";\n\ninterface ExampleProps {\n foo: string;\n}\n\nconst Example = ({foo}: ExampleProps) => {\n return (\n
\n
\n \n
Yout items
\n
{foo}
\n
\n
\n
Item 1
\n
Item 2
\n
\n
\n )\n}\n\nexport default Example;\n```\nIn this example, `foo` will return the string `bar` when converted to HTML.\n\n> [!TIP] \n> You can declare functions, interfaces & types and components in your component.\n\n### Using objects\n\nThe example above shows you how to convert the prop `foo` which is of `string` valu, however you may need to work with an object suchg as `item`. To do this you can give your component an additional prop for example `isStatic` of type `boolean` and use conditional rendering\n\n```typescript\n// Example.tsx\ninterface Seller {\n name: string;\n website: string;\n};\n\ninterface ExampleProps extends Seller {\n seller: Seller;\n isStatic: boolean;\n}\n\nconst Example = ({ \n seller, \n isStatic = true // default\n }: ExampleProps) => {\n \n function replaceWith(key: any, actualValue: any) {\n return isStaticMode ? `${key}` : actualValue;\n }\n\n return (\n
\n
\n
Seller
\n
{replaceWith(\"foo\", seller?.name)}
\n
{replaceWith(\"bar\", seller?.website)}
\n
\n
\n )\n}\n```\n\n## Generate PDF from HTML\nIf you are converting yout components to HTML so they can be later converted to PDF, it's recommended to use a package like [Puppeteer](https://pptr.dev/).\n\nPuppeteer can handle most modern CSS such as flex and grid which seem to be a common frustration with many packages.\n\n## Using a decorator\n\nInspired by [Storybook's decorators](https://storybook.js.org/docs/writing-stories/decorators), react-to-html provides you with a decorator as a way to wrap your componment inside additional code. By default this will wrap your component in a standard HTML page and insert your styles with the styles tags. \n\n### Usage\n\n```typescript\n// tohtml.config.js\nexports.settings = {\n decorator: (content, styles) => `\n \n \n \n \n \n \n \n ${content}\n \n \n `\n}\n```\n> [!TIP] \n> You can add a print media query for PDF specific styles when using something like Puppeteer to convert your HTML to PDF.\n\n\n## Author\nBuilt by [@uixmat](https://x.com/uixmat)\n\n## License\nMIT License","readmeFilename":"readme.md"}