ComponentsCompile

compile

Support

Client-side

Server-side

Preview

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

1 const html = await compile(<Component />);

1 import { 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.

1 const html = await compile(<Component />, { emotion: true });

1 import { compile } from "@fileforge/react-print";
2 import { Button, ChakraProvider, extendTheme } from "@chakra-ui/react";
3 
4 <>
5   <ChakraProvider>
6     <Button colorScheme="blue">Hello</Button>
7   </ChakraProvider>
8 </>;

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

1	import { compile } from "@fileforge/react-print";
2	import { Button, ChakraProvider, extendTheme } from "@chakra-ui/react";
3
4	<>
5	<ChakraProvider>
6	<Button colorScheme="blue">Hello</Button>
7	</ChakraProvider>
8	</>;