Skip to content

Dynamic document title component for react-router with sub-route support

License

Notifications You must be signed in to change notification settings

solydhq/react-router-title

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Router Title

This component add the possibility to have a dynamic document title based on the react-router-config. It combines all titles for the affected routes and sub-routes to one string. Additionally you can modify the title in a callback function which gives you the possibility to query data and replace some strings in the title for example.

Installation

npm install react-router-title
# or
yarn add react-router-title

Usage

Add the RouterTitle component as a direct child of Router.

import RouterTitle from 'react-router-title';
import { Router } from 'react-router-dom';

const App = () => (
  <Router>
    <RouterTitle pageTitle="My Company Name" routesConfig={routes} />
    {/* your routes */}
  </Router>
);

export default App;

Config

This component is using the react-router-config to generate the title.

Please note that it's currently not supported to use the new relative route paths introduced with React Router 6.

For this you have to extend the configuration with a title for each route.

const routes = [
  {
    title: '',
    element: <Root />,
    children: [
      {
        title: 'Child',
        path: '/child/:id',
        element: <Child />,
        children: [
          {
            title: 'Grand Child',
            path: '/child/:id/grand-child',
            element: <GrandChild />
          }
        ]
      }
    ]
  }
];

Alternatively you can also use the routes config as an object.

const routes = {
  root: {
    title: '',
    element: <Root />,
    children: {
      child: {
        title: 'Child',
        path: '/child/:id',
        element: <Child />,
        children: {
          grandChild: {
            title: 'Grand Child',
            path: '/child/:id/grand-child',
            element: <GrandChild />
          }
        }
      }
    }
  }
};

Props

Prop Required Type Default Value
pageTitle true string
routesConfig true array/object
divider false string ·
callback false function ({ title }) => title
prefix false string

Dynamic Title

If you want to have something like the project name in your title you can add placeholders like :projectName in your title string which you can replace in the callback function. The callback function can return a Promise which must return a string after it becomes resolved or directly a string.

export const callback = async (
  {
    title, // Final title string which was generated
    titles, // All title strings from all routes and sub-routes as an array
    params, // Params from the last sub-route which has params
  },
  location // Location object from router/history
) => {
  let newTitle = title;

  if (params.projectSlug && title.search(':projectName') !== -1) {
    const { projectName } = await getProjectData(projectSlug);
    newTitle = newTitle.replace(':projectName', projectName);
  }

  return newTitle;
}

Disable concatenation with parent route titles & page title

If you want to only show a title without combining them with the parent ones & page title you can use the titleConcat option on the route of your choice.

const routes = {
  root: {
    title: 'Family',
    element: <Root />,
    children: {
      child: {
        title: 'Child',
        titleConcat: false,
        path: '/child/:id',
        element: <Child />,
        children: {
          grandChild: {
            title: 'Grand Child',
            path: '/child/:id/grand-child',
            element: <GrandChild />
          }
        }
      }
    }
  }
};

About

Dynamic document title component for react-router with sub-route support

Resources

License

Stars

Watchers

Forks

Packages

No packages published