Zero-configuration CLI React static renderer
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
.gitignore
.npmignore
.travis.yml
README.md
cli.js
index.js
package.json
test.js

README.md

static-react

Zero-configuration CLI React static renderer

Build Status

Usage

npm i -g static-react
static-react RootComponent.js > index.html

Static-react include babel presets and React – there is no need to install them separately

Examples

See the examples/ directory

Fetching Data

Use the getInitialProps static method to fetch data or get server-side props for things like CSS-in-JS libraries.

import React from 'react'
import fetch from 'isomorphic-fetch'

export default class extends React.Component {
  static getInitialProps = async () => {
    const data = await fetch('https://api.example.com/data')

    return {
      data
    }
  }

  render () {
    const { data } = this.props

    return (
      <html>
        <h1>Data</h1>
        <pre>
          {JSON.stringify(data, null, 2)}
        </pre>
      </html>
    )
  }
}

CSS-in-JS

Use the getInitialProps to pass side effects from CSS-in-JS libraries as props.

import React from 'react'
import { Box } from 'rebass'

export default class Root extends React.Component {
  static getInitialProps = async (app) => {
    const { ServerStyleSheet } = require('styled-components')
    const { renderToString } = require('react-dom/server')
    const sheet = new ServerStyleSheet()
    renderToString(
      sheet.collectStyles(app)
    )
    const css = sheet.getStyleTags()
    return { css }
  }

  static defaultProps = {
    css: ''
  }

  render () {
    const { css } = this.props

    return (
      <html>
        <head>
          ${css}
        </head>
        <body>
          <Box px={3} py={4}>
            Beep boop
          </Box>
        </body>
      </html>
    )
  }
}

MIT License