Skip to content

Lomray-Software/react-head-manager

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

React meta tags manager with SSR and Suspense support

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published