`, `<Meta />`, `<Style />`, `<Link />`, and `<Base />` components as often as needed. On the server, the tags are collected in the `headTags[]` array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags). > You can view a fully working sample app in the [/example](/example) folder. ### Server setup Wrap your app with `<HeadProvider />` on the server, using a `headTags[]` array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags. ```js import * as React from 'react'; import { renderToString } from 'react-dom/server'; import { HeadProvider } from 'react-head'; import App from './App'; // ... within the context of a request ... const headTags = []; // mutated during render so you can include in server-rendered template later const app = renderToString( <HeadProvider headTags={headTags}> <App /> </HeadProvider> ); res.send(` <!doctype html> <head> ${renderToString(headTags)} </head> <body> <div id="root">${app}</div> </body> </html> `); ``` ### Client setup There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the `<head />`. ```js import * as React from 'react'; import { HeadProvider, Title, Link, Meta } from 'react-head'; const App = () => ( <HeadProvider> <div className="Home"> <Title>Title of page

# react-head > SSR-ready Document Head management for React 16+ Latest version **3.4.2** (published 2022-08-10) · MIT license · 0 weekly downloads ## Install ```sh npm install react-head pnpm add react-head yarn add react-head bun add react-head ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.4.2 | | Published | 2022-08-10 | | First published | 2016-02-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 38.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 329 | | Author | Jeremy Gayed | | Maintainers | tizmagik | | Keywords | react, head, portals, ssr, isomorphic | ## Links - npm: https://www.npmjs.com/package/react-head - Repository: https://github.com/tizmagik/react-head - Homepage: https://github.com/tizmagik/react-head#readme - Issues: https://github.com/tizmagik/react-head/issues - npm.io page: https://npm.io/package/react-head ## Dependencies (1) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.4.2 (latest) — 2022-08-10 - 3.3.0-0 (next) — 2019-05-10 - 3.4.1 — 2022-08-10 - 3.4.0 — 2020-10-09 - 3.3.0 — 2020-01-19 - 3.2.0-0 — 2019-05-10 - 3.1.1 — 2019-04-12 - 3.1.0 — 2019-02-04 - 3.0.2 — 2018-11-12 - 3.0.1 — 2018-09-19 - 3.0.0 — 2018-08-20 - 3.0.0-1 — 2018-08-13 - 3.0.0-0 — 2018-07-11 - 2.2.0 — 2018-06-28 - 2.1.0 — 2018-05-15 - … 6 more at https://npm.io/package/react-head/versions ## README # react-head [![npm Version](https://img.shields.io/npm/v/react-head.svg?style=flat-square)](https://www.npmjs.org/package/react-head) [![bundlephobia](https://badgen.net/bundlephobia/minzip/react-head)](https://bundlephobia.com/result?p=react-head) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md#pull-requests) Asynchronous SSR-ready Document Head management for React 16.3+ ## Motivation This module allows you to define `document.head` tags anywhere in your component hierarchy. The motivations are similar to [react-helmet](https://github.com/nfl/react-helmet) in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies (it does not use react-side-effects) and it should work fine with asynchronous rendering; the only requirement is React 16.3+. [Read more about react-head and how it works on Medium](https://jeremygayed.com/making-head-tag-management-thread-safe-with-react-head-323654170b45) ## Installation ```sh npm i react-head ``` or ```sh yarn add react-head ``` ## How it works 1. You wrap your App with `` 1. From the server, you pass `headTags[]` array to `` 1. Then call `renderToStaticMarkup(headTags)` and include in the `` block of your server template 1. To insert head tags within your app, just render one of ``, `<Meta />`, `<Style />`, `<Link />`, and `<Base />` components as often as needed. On the server, the tags are collected in the `headTags[]` array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags). > You can view a fully working sample app in the [/example](/example) folder. ### Server setup Wrap your app with `<HeadProvider />` on the server, using a `headTags[]` array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags. ```js import * as React from 'react'; import { renderToString } from 'react-dom/server'; import { HeadProvider } from 'react-head'; import App from './App'; // ... within the context of a request ... const headTags = []; // mutated during render so you can include in server-rendered template later const app = renderToString( <HeadProvider headTags={headTags}> <App /> </HeadProvider> ); res.send(` <!doctype html> <head> ${renderToString(headTags)} </head> <body> <div id="root">${app}</div> </body> </html> `); ``` ### Client setup There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the `<head />`. ```js import * as React from 'react'; import { HeadProvider, Title, Link, Meta } from 'react-head'; const App = () => ( <HeadProvider> <div className="Home"> <Title>Title of page // ... ); ``` ## Contributing Please follow the [contributing docs](/CONTRIBUTING.md) --- _Source: https://npm.io/package/react-head · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._