react-to-html
v0.0.4
Published
A react package to generate HTML for conversion to Email or PDF from shared components
Downloads
2,804
Readme
Introduction
Convert 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!).
Inspired by react-email from @zenorocha & @bukinoshita.
Why
Maintaining 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.
Works with Tailwind CSS
React-to-html will automatically compile your tailwindcss into your HTML version for you.
Getting started
Install react-to-html from the command line and setup your config.
# nnpm
npm i react-to-html
# pnpm
pnpm add react-to-html
# yarn
yarn add react-to-htmlBasic config tohtml.config.ts
// tohtml.config.ts
exports.settings = {
content: [
{
path: './components/Example.tsx',
props: {
foo: "bar",
},
}
],
globalStyles: './app/globals.css',
pageHeight: '297mm', // A4
pageWidth: '210mm', // A4
outputDir: './output',
outputFormat: 'pretty | minified',
};Usage
To run react-to-html simply run the command or add a script in your own packages.json.
# npm
npm build:html
# pnpm
pnpm build:html
# yarn
yarn build:htmlExample component
Below is an example component using tailwind and imported icons from Lucide.
[!IMPORTANT]
You cannot use local imports for components you wish to convert to HTML. You should validate your data before passing it as props.
import React from "react";
import { ShoppingCartIcon } from "lucide-react";
interface ExampleProps {
foo: string;
}
const Example = ({foo}: ExampleProps) => {
return (
<div className="w-full h-screen flex items-center justify-center">
<div className="flex items-center">
<ShoppingCartIcon size={32} />
<h1>Yout items</h1>
<p>{foo}</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
)
}
export default Example;In this example, foo will return the string bar when converted to HTML.
[!TIP]
You can declare functions, interfaces & types and components in your component.
Using objects
The 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
// Example.tsx
interface Seller {
name: string;
website: string;
};
interface ExampleProps extends Seller {
seller: Seller;
isStatic: boolean;
}
const Example = ({
seller,
isStatic = true // default
}: ExampleProps) => {
function replaceWith(key: any, actualValue: any) {
return isStaticMode ? `${key}` : actualValue;
}
return (
<div className="w-full h-screen flex items-center justify-center">
<div className="flex items-center">
<h1>Seller</h1>
<p>{replaceWith("foo", seller?.name)}</p>
<p>{replaceWith("bar", seller?.website)}</p>
</div>
</div>
)
}Generate PDF from HTML
If you are converting yout components to HTML so they can be later converted to PDF, it's recommended to use a package like Puppeteer.
Puppeteer can handle most modern CSS such as flex and grid which seem to be a common frustration with many packages.
Using a decorator
Inspired by Storybook's 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.
Usage
// tohtml.config.js
exports.settings = {
decorator: (content, styles) => `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@media print {
color: red;
}
body, html {
color: blue;
}
${styles}
</style>
</head>
<body>
${content}
</body>
</html>
`
}[!TIP]
You can add a print media query for PDF specific styles when using something like Puppeteer to convert your HTML to PDF.
Author
Built by @uixmat
License
MIT License