hops-react

Please see the main Hops Readme for general information and a Getting Started Guide.

This is a preset for Hops that enables React, JSX, React-Helmet and React-Router support in Hops applications.

Installation

Add this preset and its peer dependencies react, react-dom, react-helmet and react-router-dom to your existing Hops React project:

npm install --save hops-react react react-dom react-helmet react-router-dom

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Usage

After installing this preset your main entry file (either referenced via package.json "main" entry or named as index.js) must default export render(<MyApp />) from hops-react.

import { render } from 'hops-react';
import React from 'react';

export default render(<h1>Hello World!</h1>);

Check out this integration test as an example for how to use this preset.

Consumer API

render(element[, options]): UniversalRenderImplementation

This is the main render method that you need to export from your entry file to render your application. It optionally accepts an options hash where you can configure certain runtime mixins.

<Header name="String" value="String" />

Use this side-effect component to specify HTTP header values that should be set during server-side rendering.

<Miss />

Place this side-effect component after the last <Route /> in your React Router's <Switch /> component to signal the server that it should respond with a 404 status code.

<Status code={Number} />

This side-effect component can be used to set specific HTTP status codes for server-side rendering.

withServerData(Component): HigherOrderComponent

Wrap your component with this HoC to get access to the prop serverData which contains all values of mixins that have implemented the enhanceServerData hook.

<ServerDataContext.Consumer>{data => /* render something */}</ServerDataContext.Consumer>

If you don't want to use the above mentioned HoC you can also use this React Context consumer instead. It will accept a function as a child component and pass the serverData object to it. You can also use ServerDataContext as contextType or in useContext hook.

Configuration

Preset Options

This preset has no preset configuration options.

Render Options

This preset has no runtime configuration options.

Mixin Hooks API

Caution: Please be aware that the mixin hooks are not part of the SemVer API contract. This means that hook methods and signatures can change even in minor releases. Therefore it's up to you to make sure that all hooks that you are using in your own mixins still adhere to the new implementation after an upgrade of a Hops packages.

render([req, res, next]): void (override) runtime/browser/server

This is the default React universal render method which exposes the following hooks. You will usually not have to override this. See @untool/react for more details.

bootstrap([req, res]): void (parallel) runtime/browser/server

You can implement this method to run tasks before any rendering occurs to bootstrap your application. See @untool/react for more details.

enhanceElement(element): element (compose) runtime/browser/server

Implement this method to wrap your application component tree with additional components. Like a <Provider /> for Redux or some custom <ContextProvider /> when using React Context. See @untool/react for more details.

fetchData(data, element): data (pipe) runtime/browser/server

Implement this method to fetch additional data before React's renderToString() method is called. See @untool/react for more details.

getTemplateData(data): data (pipe) server

Implement this method to modify the data object after React's rendering has occured. This is useful when you need to collect the data during rendering, like styled-components or react-loadable. See @untool/react for more details.

enhanceServerData(serverData, req, res): serverData (pipe) server

In some cases you need to share data from the server-side to the client-side (for example request specific data or derived data). For these circumstances you can implement the enhanceServerData() hook (which will get passed the previous serverData object and Express request and response objects) and add your key/value pairs that you want to make accessible on the client-side via the above mentioned HoC or Context consumer.

getServerData(): serverData (override) runtime/browser/server

Returns the serverData produced by enhanceServerData on server and client.