@lomray/react-head-manager
v2.1.0
Published
React meta tags manager with SSR and Suspense support.
Downloads
155
Maintainers
Readme
React meta tags manager with SSR and Suspense support
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.