React-router-metadata NPM

react-router-metadata

Assigns HTML metadata to react-router-config routes using static functions.

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.

Usage

This package is intended to be used with other packages that invoke the static metadata methods.

You should use one of the current implementations:

react-router-dispatcher-metadata

Defining metadata

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withReactRouterMetadata from 'react-router-metadata';

class MetadataDemo extends Component {

  static propTypes = {
    name: PropTypes.string
  };

  static getMetadata(props) {
    const { name, location, match } = props;

    // Return the metadata
    // see react-html-metadata docs for permitted syntax
    return {
      title: `Welcome ${name}`
    };
  }

  render() {
    return <div>`Hello ${this.props.name}`</div>
  }
}

// This function is used to map `params` to match the component `props`
// Other packages use this to resolve params to props
const mapParamsToProps(params, routerCtx) => {
  const { store } = params;

  // Return the component `props`
  return {
    name: store.user.name
  };
};

export default withReactRouterMetadata({ mapParamsToProps })(MetadataDemo);

Install

NPM

npm install --save react-router-metadata

Yarn

yarn add react-router-metadata

API

withReactRouterMetadata(options)

Options

mapParamsToProps?: (params: Object, routerCtx: { route: Object, routeComponentKey: string }) => Object: Optional

Optionally, use a function that maps parameters to match the component props.
This is only required if your getMetadata implementation uses prop values.

staticMethodName?: string:

The static method name that must be invoked on the component before render.
default: preloadMetadata

componentStaticMethodName?: string

The static method name that must be implemented by the developer to return metadata.
default: getMetadata

metadataPropName?: string

The name (or key) used by the parameters to store the metadata instance
default: metadata

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.