Write HTML documents with custom tags and render them with your React components.
Renderdoc is a static document generator. It takes an input HTML document with custom tags. You provide the React components that implement the tags. The output file is the rendered HTML.
## Example
As input, you need two things: an input HTML file, and a directory that contains some React components.
```
my-document.html
components/
Chapter.js
Header.js
Page.js
```
Here is your input file: `my-document.html`
```html
It was a dark and stormy night.
```
In the `components` directory, you have these React components:
```js
// components/Chapter.js
import React from 'react';
export default function Chapter({ title, children }) {
return (
{title}
{children}
);
}
```
```js
// components/Header.js
import React from 'react';
export default function Header({ children }) {
return {children}
;
}
```
```js
// components/Page.js
import React from 'react';
export default function Page({ children }) {
return (
{children}
);
}
```
Run renderdoc on the source file. The `components` directory will be automatically used to load the components.
```shell
renderdoc my-document.html
```
The rendered output file:
```html
The Beginning
It was a dark and stormy night.
```
## Caveats
- The HTML inpujt must be well-formed XML. Every tag must be closed or self-closing.
- The tags are case sensitive (that's because they're loaded by filename from the `components` directory)
- You need to supply a parent component to act as a wrapper. To render a HTML page, you probably want a component that renders a `` element with the children wrapped in a ``
- The final output will be prepended with `` unless you disable this feature.