react-router-metadata v2.1.0
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:
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.
License
MIT