https://github.com/tizmagik/react-head

⛑ SSR-ready Document Head tag management for React 16+
https://github.com/tizmagik/react-head

hacktoberfest head isomorphic react server-side-rendering ssr

Last synced: 20 days ago
JSON representation

⛑ SSR-ready Document Head tag management for React 16+

• Host: GitHub
• URL: https://github.com/tizmagik/react-head
• Owner: tizmagik
• License: mit
• Created: 2017-10-09T02:03:51.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T16:30:15.000Z (over 1 year ago)
• Last Synced: 2024-10-16T05:43:29.185Z (about 1 month ago)
• Topics: hacktoberfest, head, isomorphic, react, server-side-rendering, ssr
• Language: JavaScript
• Homepage:
• Size: 2.38 MB
• Stars: 321
• Watchers: 3
• Forks: 34
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-head - ready Document Head tag management for React 16+ | tizmagik | 273 | (JavaScript)

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 `

      
${app}