Support

Client-side
Server-side

Preview

A simple function to compile a React component to an HTML string with the Onedoc print styles.

1const html = await compile(<Component />);
1import { compile } from "@fileforge/react-print";
2
3<Tailwind>
4 <div className="bg-red-400">Hello World!</div>
5</Tailwind>;

Examples

Emotion CSS

Pass { emotion: true } as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.

1const html = await compile(<Component />, { emotion: true });
1import { compile } from "@fileforge/react-print";
2import { Button, ChakraProvider, extendTheme } from "@chakra-ui/react";
3
4<>
5 <ChakraProvider>
6 <Button colorScheme="blue">Hello</Button>
7 </ChakraProvider>
8</>;