react-router-metadata-action

A react-router-dispatcher action for defining HTML metadata.

Read the react-router-dispatcher documentation if you haven't already done so.

This package supports:

• server-side rendering using streams
• composing metadata from nested components (just like react-helmet)

There is an working example here

Internally, react-html-metadata is used to support the use of metadata with the react SSR stream interface, for more information about how to define metadata you should view that packages readme file.

Install

NPM

npm install --save react-router-metadata-action

Yarn

yarn add react-router-metadata-action

Usage

import getMetadataAction, { GET_METADATA } from 'react-router-metadata-action';

// GET_METADATA is the action name, used to configure react-router-dispatcher

Example

Using the metadata action

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { renderRoutes } from 'react-router-config';
import { withActions } from 'react-router-dispatcher';
import getMetadataAction from 'react-router-metadata-action';

class AppRoot extends Component {

    static propTypes = {
        route: PropTypes.object.isRequired,
        assets: PropTypes.object.isRequired
    };

    // define metadata for this component
    static getMetadata(match, { assets }) {
        return {
            htmlAttributes: {lang: 'en', amp: undefined},
            bodyAttributes: {className: 'root'},
            titleTemplate: "MySite.com - %s",
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width, initial-scale=1' }
            ],
            link: [
                { rel: 'shortcut icon', href: 'favicon.ico' },
                { rel: 'stylesheet', href: assets['main.css'] }
            ]
        };
    }

    render() {
        const { route: { routes } } = this.props;
        return renderRoutes(routes || null);
    }
}

// Maps react-router-dispatcher action parameters to component prop values
// - this is used for SSR and client metadata-hydration to enable correct props to be passed to 'getMetadata()'
// - the map function MUST map params to the SAME prop values the component will receive during a normal render
const mapParamsToProps = ({ assets }) => ({ assets });

export default withActions(getMetadataAction(mapParamsToProps))(Root);

Configuring the metadata action using react-router-dispatcher

import { createRouteDispatchers } from 'react-router-dispatcher';
import { GET_METADATA } from 'react-router-metadata-action';
import routes from './routes';

const {
    UniversalRouteDispatcher,
    ClientRouteDispatcher,
    dispatchClientActions,
    dispatchServerActions
} = createRouteDispatchers(routes, [[GET_METADATA]]);

API

getMetadataAction(paramsToProps)

Parameters

paramsToProps: (params: Object, routerCtx: Object) => Object

• An optional function that maps action parameters to component props

Contribute

For questions or issues, please open an issue, and you're welcome to submit a PR for bug fixes and feature requests.

Before submitting a PR, ensure you run npm test to verify that your coe adheres to the configured lint rules and passes all tests. Be sure to include unit tests for any code changes or additions.

License

MIT