Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ajaybhatia/react-helmet-hero


https://github.com/ajaybhatia/react-helmet-hero

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        



# React Helmet Hero



[![npm Version](https://img.shields.io/npm/v/react-helmet-hero.svg?style=flat-square)](https://www.npmjs.org/package/react-helmet-hero)

[![codecov.io](https://img.shields.io/codecov/c/github/nfl/react-helmet-hero.svg?branch=master&style=flat-square)](https://codecov.io/github/nfl/react-helmet-hero?branch=master)

[![Build Status](https://img.shields.io/travis/nfl/react-helmet-hero/master.svg?style=flat-square)](https://travis-ci.org/nfl/react-helmet-hero)

[![Dependency Status](https://img.shields.io/david/nfl/react-helmet-hero.svg?style=flat-square)](https://david-dm.org/nfl/react-helmet-hero)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md#pull-requests)



**NOTE: Forked from react-helmet. Only difference is that it injects items into the top of head element rather than into the bottom. Makes it possible for twitter/open graph web crawlers to find meta tags in head.**



This reusable React component will manage all of your changes to the document head.



Helmet _takes_ plain HTML tags and _outputs_ plain HTML tags. It's dead simple, and React beginner friendly.



## [6.1.0 Major Changes](https://github.com/nfl/react-helmet-hero/releases/tag/6.1.0)



## Example

```javascript

import React from "react";

import {Helmet} from "react-helmet-hero";



const App = () => {

    return (

        


            

                

                My Title

                

            

            ...

        


    );

};

```



Nested or latter components will override duplicate changes:



```javascript



    

        My Title

        

    



    

        

            Nested Title

            

        

    



```



outputs:



```html



    Nested Title

    



```



See below for a full reference guide.



## Features

- Supports all valid head tags: `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.

- Supports attributes for `body`, `html` and `title` tags.

- Supports server-side rendering.

- Nested components override duplicate head changes.

- Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").

- Callback for tracking DOM changes.



## Compatibility



Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.



## Installation



Yarn:

```bash

yarn add react-helmet-hero

```



npm:

```bash

npm install --save react-helmet-hero

```



## Server Usage

To use on the server, call `Helmet.renderStatic()` after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup` to get the head data for use in your prerender.



Because this component keeps track of mounted instances, **you have to make sure to call `renderStatic` on server**, or you'll get a memory leak.



```javascript

ReactDOMServer.renderToString();

const helmet = Helmet.renderStatic();

```



This `helmet` instance contains the following properties:

- `base`

- `bodyAttributes`

- `htmlAttributes`

- `link`

- `meta`

- `noscript`

- `script`

- `style`

- `title`



Each property contains `toComponent()` and `toString()` methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by `toComponent()`. E.g:



### As string output

```javascript

const html = `

    

    

        

            ${helmet.title.toString()}

            ${helmet.meta.toString()}

            ${helmet.link.toString()}

        

        

            


                // React stuff here

            


        

    

`;

```



### As React components

```javascript

function HTML () {

    const htmlAttrs = helmet.htmlAttributes.toComponent();

    const bodyAttrs = helmet.bodyAttributes.toComponent();



    return (

        

            

                {helmet.title.toComponent()}

                {helmet.meta.toComponent()}

                {helmet.link.toComponent()}

            

            

                


                    // React stuff here

                


            

        

    );

}

```



### Note: Use the same instance

If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the `webpack file` so that the same instance of `react-helmet-hero` is used.

```

externals: ["react-helmet-hero"],

```

Or to import the *react-helmet-hero* instance from the app on the server.



### Reference Guide



```javascript



            Nested Title

        



        outputs:



        

            Nested Title | MyAwesomeWebsite.com

        

    */}

    titleTemplate="MySite.com - %s"



    {/*

        (optional) used as a fallback when a template exists but a title is not defined



        



        outputs:



        

            My Site

        

    */}

    defaultTitle="My Default Title"



    {/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.

        Useful if you want to update the title when the tab is out of focus

    */}

    defer={false}



    {/* (optional) callback that tracks DOM changes */}

    onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}

>

    {/* html attributes */}