react-document-meta
Advanced tools
Declarative, nested and stateful HTML document meta tags for React
HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.
Built with React Side Effect
npm install --save react-document-meta
Note: React Side Effect requires React 0.14+ - and so does React Document Meta.
Due to several deprecations and breaking changes to React, you'll have to use react-document-meta@^1.0.0.
As React Side Effect has been upgraded there is a few breaking changes, which is found in the changelog.
See example folder for a working sample.
import React from 'react';
import DocumentMeta from 'react-document-meta';
class Example extends React.Component {
render() {
const meta = {
title: 'Some Meta Title',
description: 'I am a description, and I can create multiple tags',
canonical: 'http://example.com/path/to/page',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}
};
return (
<DocumentMeta {...meta}>
<h1>Hello World!</h1>
</DocumentMeta>
);
}
}
React.render(<Example />, document.getElementById('root'));
In most real world use cases, you would like to set some defaults and modify, replace or add just some of the meta tags. react-document-meta always use the deepest data set, but you can add an extend attribute (<DocumentMeta {...metaData} extend />), to instruct the component to merge with the meta data specified one level up. You can add the extend attribute to as many DocumentMeta components you would like, but the chain needs to be complete.
react-document-meta has the ability to generate meta tags based on the already provided meta data. Currently only open graph title, description and url is supported, which uses the data from title, description and canonical, and only in the case where the values has not been explicit set for og:title, og:description or og:url respectively.
When using react-document-meta in a project with server-side rendering, you would like to have the final meta data chunk available in your HTML output. You can achieve this by calling DocumentMeta.rewind().
Instead of getting a plain object, you can have the module return the meta as either React components or a HTML string. This is achieved by calling DocumentMeta.renderAsReact() or DocumentMeta.renderAsHTML().
import React from 'react';
import DocumentMeta from 'react-document-meta';
export default handler = (...args) => {
...
const app = React.renderToString(components);
const meta = DocumentMeta.renderAsHTML();
const markup = `
<html>
<head>
${meta}
</head>
<body>
<div id="app">
${app}
</div>
</body>
</html>
`
...
}
FAQs
Declarative, nested and stateful HTML document meta tags for React
We found that react-document-meta demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.