@lomray/react-head-manager
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

React meta tags manager with SSR and Suspense support

npm GitHub

Quality Gate Status Reliability Rating Security Rating Vulnerabilities Lines of Code Coverage

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.

Bugs and feature requests

Bug or a feature request, please open a new issue.

License

Made with 💚

Published under MIT License.

Package Sidebar

Install

npm i @lomray/react-head-manager

Weekly Downloads

6

Version

2.1.0

License

MIT

Unpacked Size

51 kB

Total Files

21

Last publish

Collaborators

  • matthew_patell