reunify
React with zero configuration
Last updated a year ago by mikebild .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install reunify 
SYNC missed versions from official npm registry.

reunify

Document & develop React components without breaking a sweat

Build Status

npm install -g reunify

Features

  • Zero-config
  • No plugins
  • Components over configuration
  • Automatic file system based routing
  • Completely customizable
  • Export static sites
  • Works as an isolated development environment

Getting Started

reunify renders a directory of React components, automatically handling routing based on filename. Create a docs folder and add an index.js file.

// index.js
import React from 'react';

export default class extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

Start a development server by running:

reunify docs --open

To add more pages, add a new component for each route. For example, create an about page:

// about.js
import React from 'react';

export default props => <h1>About</h1>;

The about page should now render when navigating to http://localhost:8080/about.

Isolated development environment

reunify docs

Options:

-o --open       Open dev server in default browser
-p --port       Custom port for dev server
-t --template   Path to custom HTML template
--webpack       Path to custom webpack configuration
reunify docs -op 8080

Static build and export

Export static HTML and client-side bundle

reunify export docs

Export static HTML without bundle

reunify export docs --static

Options

-d --out-dir    Output directory (default dist)
-s --static     Output static HTML without JS bundle
-t --template   Path to custom HTML template
--webpack       Path to custom webpack configuration

Fetching Data

Use the async getInitialProps static method to fetch data for static rendering. This method was inspired by Next.js.

const Index = props => <h1>Hello {props.data}</h1>;

Index.getInitialProps = async () => {
  const fetch = require('isomorphic-fetch');
  const res = await fetch('http://example.com/data');
  const data = await res.json();

  return {data};
};

Custom App

A custom App component can be provided by including an _app.js file. The App component uses the render props pattern to provide additional state and props to its child routes.

// example _app.js
import React from 'react';

export default class extends React.Component {
  state = {
    count: 0
  };

  update = fn => this.setState(fn);

  render() {
    const {render, routes} = this.props;

    return render({
      ...this.state,
      decrement: () => this.update(s => ({count: s.count - 1})),
      increment: () => this.update(s => ({count: s.count + 1}))
    });
  }
}

Layouts

The App component can also be used to provide a common layout for all routes.

// example _app.js
import React from 'react';
import Nav from '../components/Nav';
import Header from '../components/Header';
import Footer from '../components/Footer';

export default class extends React.Component {
  render() {
    const {render, routes} = this.props;

    const route = routes.find(route => route.path === props.location.pathname);

    return (
      <React.Fragment>
        <Nav />
        <Header route={route} />
        {render()}
        <Footer />
      </React.Fragment>
    );
  }
}

CSS-in-JS

reunify supports server-side rendering for [styled-components][sc] and [emotion][emotion] with zero configuration.

Styled Components

To enable CSS rendering for static export, ensure that styled-components is installed as a dependency in your package.json

"dependencies": {
  "styled-components": "^3.2.6"
}

Emotion

Ensure emotion is installed as a dependency in your package.json

"dependencies": {
  "emotion": "^9.1.3"
}

Configuration

Default options can be set in the reunify field in package.json.

"reunify": {
  "static": true,
  "outDir": "site",
  "title": "Hello",
}

Head content

Head elements such as <title>, <meta>, and <style> can be configured with the reunify field in package.json.

"reunify": {
  "title": "My Site",
  "meta": [
    { "name": "twitter:card", "content": "summary" }
    { "name": "twitter:image", "content": "kitten.png" }
  ],
  "links": [
    {
      "rel": "stylesheet",
      "href": "https://fonts.googleapis.com/css?family=Roboto"
    }
  ]
}

Custom HTML Template

A custom HTML template can be passed as the template option.

"reunify": {
  "template": "./html.js"
}
// example template
module.exports = ({html, css, scripts, title, meta = [], links = [], static: isStatic}) => `<!DOCTYPE html>
<head>
  <title>{title}</title>
  ${css}
</head>
<div id=root>${html}</div>
${scripts}
`;

Routing

reunify creates routes based on the file system, using react-router. To set the base URL for static build and export, use the basename option.

"reunify": {
  "basename": "/my-site"
}

Links

To link between different components, install react-router-dom and use the Link component.

npm i react-router-dom
import React from 'react';
import {Link} from 'react-router-dom';

export default () => (
  <div>
    <h1>Home</h1>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  </div>
);

JSX Format

Reunify includes support for the JSX file format.

---
title: Hello
---
import { Box, Heading } from 'rebass'

<Box px={2} py={4}>
  <Heading>
    {frontMatter.title}
  </Heading>
</Box>

webpack

Webpack configuration files named webpack.config.js will automatically be merged with the built-in configuration, using webpack-merge. To use a custom filename, pass the file path to the --webpack flag.

// webpack.config.js example
module.exports = {
  module: {
    rules: [{test: /\.txt$/, loader: 'raw-loader'}]
  }
};

See the example.

Related


Made by Code Commission | MIT License

Current Tags

  • 6.1.1                                ...           latest (a year ago)

128 Versions

  • 6.1.1                                ...           a year ago
  • 6.1.0                                ...           a year ago
  • 6.0.1                                ...           a year ago
  • 6.0.0                                ...           a year ago
  • 5.3.0                                ...           2 years ago
  • 5.2.3                                ...           2 years ago
  • 5.2.2                                ...           2 years ago
  • 5.2.1                                ...           2 years ago
  • 5.2.0                                ...           2 years ago
  • 5.1.0                                ...           2 years ago
  • 5.0.4                                ...           2 years ago
  • 5.0.3                                ...           2 years ago
  • 5.0.2                                ...           2 years ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.9.1                                ...           2 years ago
  • 4.9.0                                ...           2 years ago
  • 4.8.9                                ...           2 years ago
  • 4.8.8                                ...           2 years ago
  • 4.8.7                                ...           2 years ago
  • 4.8.6                                ...           2 years ago
  • 4.8.5                                ...           2 years ago
  • 4.8.4                                ...           2 years ago
  • 4.8.3                                ...           2 years ago
  • 4.8.2                                ...           2 years ago
  • 4.8.1                                ...           2 years ago
  • 4.8.0                                ...           2 years ago
  • 4.7.3                                ...           2 years ago
  • 4.7.2                                ...           2 years ago
  • 4.7.1                                ...           2 years ago
  • 4.7.0                                ...           2 years ago
  • 4.6.1                                ...           2 years ago
  • 4.6.0                                ...           2 years ago
  • 4.5.3                                ...           2 years ago
  • 4.5.2                                ...           2 years ago
  • 4.5.1                                ...           2 years ago
  • 4.5.0                                ...           2 years ago
  • 4.4.4                                ...           2 years ago
  • 4.4.3                                ...           2 years ago
  • 4.4.2                                ...           2 years ago
  • 4.4.1                                ...           2 years ago
  • 4.4.0                                ...           2 years ago
  • 4.3.0                                ...           2 years ago
  • 4.2.2                                ...           2 years ago
  • 4.2.1                                ...           2 years ago
  • 4.2.0                                ...           2 years ago
  • 4.1.0                                ...           2 years ago
  • 4.0.4                                ...           2 years ago
  • 4.0.3                                ...           2 years ago
  • 4.0.2                                ...           2 years ago
  • 4.0.1                                ...           2 years ago
  • 4.0.0                                ...           2 years ago
  • 3.9.1                                ...           2 years ago
  • 3.9.0                                ...           2 years ago
  • 3.8.0                                ...           2 years ago
  • 3.7.9                                ...           2 years ago
  • 3.7.8                                ...           2 years ago
  • 3.7.7                                ...           2 years ago
  • 3.7.6                                ...           2 years ago
  • 3.7.5                                ...           2 years ago
  • 3.7.4                                ...           2 years ago
  • 3.7.3                                ...           2 years ago
  • 3.7.2                                ...           2 years ago
  • 3.7.1                                ...           2 years ago
  • 3.7.0                                ...           2 years ago
  • 3.6.1                                ...           2 years ago
  • 3.6.0                                ...           2 years ago
  • 3.5.9                                ...           2 years ago
  • 3.5.8                                ...           2 years ago
  • 3.5.7                                ...           2 years ago
  • 3.5.6                                ...           2 years ago
  • 3.5.5                                ...           2 years ago
  • 3.5.4                                ...           2 years ago
  • 3.5.3                                ...           2 years ago
  • 3.5.2                                ...           2 years ago
  • 3.5.1                                ...           2 years ago
  • 3.5.0                                ...           2 years ago
  • 3.4.1                                ...           2 years ago
  • 3.4.0                                ...           2 years ago
  • 3.3.13                                ...           2 years ago
  • 3.3.12                                ...           2 years ago
  • 3.3.11                                ...           2 years ago
  • 3.3.10                                ...           2 years ago
  • 3.3.9                                ...           2 years ago
  • 3.3.8                                ...           2 years ago
  • 3.3.7                                ...           2 years ago
  • 3.3.6                                ...           2 years ago
  • 3.3.5                                ...           2 years ago
  • 3.3.4                                ...           2 years ago
  • 3.3.3                                ...           2 years ago
  • 3.3.2                                ...           2 years ago
  • 3.3.1                                ...           2 years ago
  • 3.3.0                                ...           2 years ago
  • 3.2.1                                ...           2 years ago
  • 3.2.0                                ...           2 years ago
  • 3.1.13                                ...           2 years ago
  • 3.1.12                                ...           2 years ago
  • 3.1.11                                ...           2 years ago
  • 3.1.10                                ...           2 years ago
  • 3.1.9                                ...           2 years ago
  • 3.1.8                                ...           2 years ago
  • 3.1.7                                ...           2 years ago
  • 3.1.6                                ...           2 years ago
  • 3.1.5                                ...           2 years ago
  • 3.1.4                                ...           2 years ago
  • 3.1.3                                ...           2 years ago
  • 3.1.2                                ...           2 years ago
  • 3.1.1                                ...           2 years ago
  • 3.1.0                                ...           2 years ago
  • 3.0.4                                ...           2 years ago
  • 3.0.3                                ...           2 years ago
  • 3.0.2                                ...           2 years ago
  • 3.0.1                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 3.0.0-beta.6                                ...           2 years ago
  • 3.0.0-beta.5                                ...           2 years ago
  • 3.0.0-beta.4                                ...           2 years ago
  • 3.0.0-beta.3                                ...           2 years ago
  • 3.0.0-beta.2                                ...           2 years ago
  • 3.0.0-beta.1                                ...           2 years ago
  • 3.0.0-beta.0                                ...           2 years ago
  • 2.0.8                                ...           2 years ago
  • 2.0.7                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           3 years ago
  • 2.0.3                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 129
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |