This component provides a React Component to render a HTML Document with common functionality. It can be integrated into webpack static builds as well as SSR.
React Document aims to provide a static interface for other libraries to generate dom.
npm install --save react-documentOptional. React props for the html element.
Optional. React props for the body element.
Optional. A string to dangerously set inside the app mount element. Usually a rendered React app.
Optional. The id of the app mount element. Defaults to 'app'.
Optional. Title of the document, rendered in a <title> tag.
Optional. Configuration for the viewport meta tag. Defaults to a mobile
friendly width=device-width, initial-scale=1.
Optional. Array of React elements to render inside the <head> tag.
Optional. Array of React elements to render in the footer, after the content of the page.
Optional. Array of urls to load with script tags. These are placed in the <head> with the defer attribute. This allows the browser to start preloading the script but delay execution until the DOM is ready.
Optional. Array of urls to load with stylesheet link tags in the head.
Optional. Object who's own properties are safely serialized
to JSON and attached to the browser's window object in corresponding keys.
Inspired by Next.js, it's easy to customize the Document without breaking other integrations:
import React from 'react'
import Document, { Html, Head, Body, App, Footer } from 'react-document'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* Roboto */}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</Head>
<Body>
<App />
<Footer />
{/* Pixel */}
<img height="1" width="1" style={{display: 'none'}}
src="https://www.facebook.com/tr?id=...&ev=PageView&noscript=1"
/>
</Body>
</Html>
)
}
}import Document from 'react-document'
import { renderToStaticMarkup, renderToString } from 'react/server'
// ... in rendering context:
const app = renderToString(<App />)
const document = '<!doctype html>' + renderToStaticMarkup(
<Document
title="Hello World"
app={app}
appMountId="root"
/>
)Check out jsx-document-webpack-plugin.