# react-document-meta > Declarative, nested and stateful HTML document meta tags for React Latest version **3.0.0-beta.2** (published 2018-03-21) · MIT license · 10.5K weekly downloads ## Install ```sh npm install react-document-meta pnpm add react-document-meta yarn add react-document-meta bun add react-document-meta ``` ## Health **Score 23/100 (F)** — status: abandoned. Positive: has types package; no vulnerabilities; high quality score. Warnings: no esm support. Negative: abandoned; low maintenance score; declining downloads. ## Facts | | | |---|---| | Version | 3.0.0-beta.2 | | Published | 2018-03-21 | | First published | 2015-05-04 | | Weekly downloads | 10.5K | | License | MIT | | TypeScript types | separate (@types/react-document-meta) | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 339 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 317 | | Author | Daniel Juhl | | Maintainers | danieljuhl, kodyl | | Keywords | react, meta, html, document, tags, react-component | ## Links - npm: https://www.npmjs.com/package/react-document-meta - Repository: https://github.com/kodyl/react-document-meta - Homepage: https://github.com/kodyl/react-document-meta#readme - Issues: https://github.com/kodyl/react-document-meta/issues - npm.io page: https://npm.io/package/react-document-meta ## Dependencies (2) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [react-side-effect](https://npm.io/package/react-side-effect.md) ^1.1.0 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 3.0.0-beta.2 (latest) — 2018-03-21 - 3.0.0-beta.5 (next) — 2018-03-21 - 3.0.0-beta.4 — 2018-03-21 - 3.0.0-beta.3 — 2018-03-21 - 3.0.0-beta.1 — 2018-01-05 - 3.0.0-beta.0 — 2017-04-28 - 2.1.2 — 2017-04-20 - 2.1.1 — 2016-11-24 - 2.1.0 — 2016-11-23 - 2.0.3 — 2016-04-08 - 2.0.2 — 2016-01-14 - 2.0.1 — 2016-01-04 - 2.0.0 — 2015-10-21 - 2.0.0-rc2 — 2015-09-17 - 1.1.0 — 2015-09-17 - … 8 more at https://npm.io/package/react-document-meta/versions ## README React Document Meta [![Build Status](https://travis-ci.org/kodyl/react-document-meta.svg)](https://travis-ci.org/kodyl/react-document-meta) [![Coverage Status](https://coveralls.io/repos/github/kodyl/react-document-meta/badge.svg?branch=master)](https://coveralls.io/github/kodyl/react-document-meta?branch=master) [![npm version](https://badge.fury.io/js/react-document-meta.svg)](http://badge.fury.io/js/react-document-meta) =================== 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](https://github.com/gaearon/react-side-effect) ___________________ Installation ------------------- ``` npm install --save react-document-meta ``` Note: React Side Effect requires React 0.14+ - and so does React Document Meta. Using with React v0.13 ------------------- Due to several deprecations and breaking changes to React, you'll have to use `react-document-meta@^1.0.0`. Upgrading from 0.1.x to 1.x ------------------- As React Side Effect has been upgraded there is a few breaking changes, which is found in the [changelog](CHANGELOG.md). Features ------------------- - Supports extending and nesting on any number of levels - Ability to auto generate some meta tags for open graph, twitter, and more Usage ------------------- See `example` folder for a working sample. ```javascript 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 (

Hello World!

 ); } } React.render(, document.getElementById('root')); ``` ### Nesting 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 (``), 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. ### Automatic Meta Tags `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. Server Usage ------------------- 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()`. ```javascript 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 = ` ${meta}
${app}
` ... } ``` TODO: ------------------- - [ ] Create full documentation - [ ] Improve flexibility for custom attributes --- _Source: https://npm.io/package/react-document-meta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._