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.
This package is intended to be used with other packages that invoke the static metadata methods.
You should use one of the current implementations:
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);npm install --save react-router-metadatayarn add react-router-metadatawithReactRouterMetadata(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
getMetadataimplementation 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
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.
MIT