@lomray/react-head-manager NPM

React meta tags manager with SSR and Suspense support

npm GitHub

Getting started

The package is distributed using npm, the node package manager.

npm i --save @lomray/react-head-manager

WARNING: this package use @lomray/consistent-suspense for generate stable id's inside Suspense.

Usage

import { ConsistentSuspenseProvider } from '@lomray/consistent-suspense';
import { MetaManagerProvider, Manager, Meta } from '@lomray/react-head-manager';

const manager = new Manager();

/**
 * Root component container
 */
const App = ({ children }) => {
    const [state] = useState();

    return (
      <ConsistentSuspenseProvider> {/** required, see warning above **/}
        <MetaManagerProvider manager={manager}>
          <MyComponent />
        </MetaManagerProvider>
      </ConsistentSuspenseProvider>
    )
}

/**
 * Some component
 */
const MyComponent = () => {
    return (
      <>
        <Meta>
          <title>Example</title>
          <meta name="description" content="Description example" />
          <meta name="keywords" content="test,key" />
          <body data-id="test" />
        </Meta>
        <div>Some component....</div>
      </>
    )
}

Change tags order:

/**
 * Way 1
 */
const manager = new Manager();
manager.setTagsDefinitions({
  title: 1, // change order for title tag
  "meta[name='viewport']": 2, // change order for meta viewport tag
  meta: 100, // change for all meta tags
  script: 200, // change for all script tags
});

/**
 * Way 2
 */
<Meta>
  <title data-order={1}>Example</title>
  <meta data-order={3} name="description" content="Description example" />
  <meta data-order={2} name="keywords" content="test,key" />
</Meta>

/**
 * You can also use both...
 */

Explore demo app to more understand.