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