Zero-configuration CLI React static renderer
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
.gitignore
.npmignore Edit npmignore Jun 18, 2018
.travis.yml Edit travis config Aug 15, 2017
README.md
cli.js
index.js Rewrite again Jun 18, 2018
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