Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/static-react
Zero-configuration CLI React static renderer
https://github.com/jxnblk/static-react
cli react static zero-configuration
Last synced: about 1 month ago
JSON representation
Zero-configuration CLI React static renderer
- Host: GitHub
- URL: https://github.com/jxnblk/static-react
- Owner: jxnblk
- Created: 2015-02-28T00:28:14.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-06-19T04:33:08.000Z (over 6 years ago)
- Last Synced: 2024-11-06T11:21:14.183Z (about 1 month ago)
- Topics: cli, react, static, zero-configuration
- Language: JavaScript
- Homepage:
- Size: 506 KB
- Stars: 349
- Watchers: 7
- Forks: 29
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# static-react
Zero-configuration CLI React static renderer
[![Build Status][badge]](https://travis-ci.org/jxnblk/static-react)
[badge]: https://img.shields.io/travis/jxnblk/static-react.svg?style=flat-square
## 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/](examples) directory
## Fetching Data
Use the `getInitialProps` static method to fetch data or get server-side props for things like CSS-in-JS libraries.
```jsx
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.propsreturn (
Data
{JSON.stringify(data, null, 2)}
)
}
}
```## CSS-in-JS
Use the `getInitialProps` to pass side effects from CSS-in-JS libraries as props.
```jsx
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.propsreturn (
${css}
Beep boop
)
}
}
```---
MIT License