❤
npm
Sign UpSign In

react-document
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

React Document

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.

Install

npm install --save react-document

Props

<Document />

Props

- htmlProps?: { [key: string]: string }

Optional. React props for the html element.

- bodyProps?: { [key: string]: string }

Optional. React props for the body element.

- app?: string

Optional. A string to dangerously set inside the app mount element. Usually a rendered React app.

- appMountId?: string

Optional. The id of the app mount element. Defaults to 'app'.

- title?: string

Optional. Title of the document, rendered in a <title> tag.

- viewport?: string

Optional. Configuration for the viewport meta tag. Defaults to a mobile friendly width=device-width, initial-scale=1.

- head?: ReactElement[]

Optional. Array of React elements to render inside the <head> tag.

- footer?: ReactElement[]

Optional. Array of React elements to render in the footer, after the content of the page.

- js?: string[]

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.

- css?: string[]

Optional. Array of urls to load with stylesheet link tags in the head.

- window?: { [key: string]: any }

Optional. Object who's own properties are safely serialized to JSON and attached to the browser's window object in corresponding keys.

Extending Document

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=...&amp;ev=PageView&amp;noscript=1"
          />
        </Body>
      </Html>
    )
  }
}

Usage in SSR

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"
  />
)

Usage with webpack-dev-server

Check out jsx-document-webpack-plugin.

Readme

Keywords

none

Package Sidebar

Install

npm i react-document

Repository

github.com/aranja/react-document

Homepage

github.com/aranja/react-document#readme

Weekly Downloads

2

Version

0.7.1

License

MIT

Last publish

Collaborators

  • eirikurn
  • rthor
  • thorsteinsson
  • mr-aranja
Try on RunKit
Report malware