react-document
Advanced tools
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-document
Optional. 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 Document, { Html, Head, Body, App, Footer } from 'react-document'
export 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.
FAQs
Customizable default Document component
We found that react-document demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.