react-helmet-itemprop

v0.0.5

Published

2 years ago

A document head manager for React

Downloads

0High
0Medium
0Low

daniele_cammarata

react-helmet nfl react document head title meta link script base

React Helmet Itemprop

Fork of the excellent react-helmet, just added itemprop, but I needed before possible integration with the original, use the original package because this is not maintained at all

This reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.

Inspired by react-document-title

Table of Contents generated with DocToc

Examples

import React from "react";
import Helmet from "react-helmet";

export default function Application () {
    return (
        <div className="application">
            <Helmet title="My Title" />
            ...
        </div>
    );
};

import React from "react";
import Helmet from "react-helmet";

export default function Application () {
    return (
        <div className="application">
            <Helmet
                title="My Title"
                titleTemplate="MySite.com - %s"
                base={{"target": "_blank", "href": "http://mysite.com/"}}
                meta={[
                    {"name": "description", "content": "Helmet application"},
                    {"property": "og:type", "content": "article"}
                ]}
                link={[
                    {"rel": "canonical", "href": "http://mysite.com/example"},
                    {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
                    {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
                ]}
                script={[
                  {"src": "http://include.com/pathtojs.js", "type": "text/javascript"}
                ]}
                onChangeClientState={(newState) => console.log(newState)}
            />
            ...
        </div>
    );
};

Features

Supports isomorphic environment.
Nested components override duplicate head changes.
Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
Only valid base/meta/link/script key names allowed.
Support for callbacks to fire when Helmet changes the DOM.

Installation

npm install --save react-helmet

Server Usage

To use on the server, call rewind() after ReactDOM.renderToString or ReactDOM.renderToStaticMarkup to get the head data for use in your prerender.

ReactDOM.renderToString(<Handler />);
let head = Helmet.rewind();

head.title
head.base
head.meta
head.link
head.script

head contains five possible properties, title, base, meta, link, script:

Each property contains toComponent() and toString() methods. Use whichever is appropriate for your environment. E.g:

As string output

const html = `
    <!doctype html>
    <html>
        <head>
            ${head.title.toString()}
            ${head.meta.toString()}
            ${head.link.toString()}
        </head>
        <body>
            <div id="content">
                // React stuff here
            </div>
        </body>
    </html>
`;

As React components

function HTML () {
    return (
        <html>
            <head>
                {head.title.toComponent()}
                {head.meta.toComponent()}
                {head.link.toComponent()}
            </head>
            <body>
                <div id="content">
                    // React stuff here
                </div>
            </body>
        </html>
    );
}

Use Cases

Nested or latter components will override duplicate changes.

<Helmet
    title="My Title"
    meta={[
        {"name": "description", "content": "Helmet application"}
    ]}
/>
<Helmet
    title="Nested Title"
    meta={[
        {"name": "description", "content": "Nested component"}
    ]}
/>

Yields:

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>

Use a titleTemplate to format title text in your page title

<Helmet
    title="My Title"
    titleTemplate="%s | MyAwesomeWebsite.com"
/>
<Helmet
    title="Nested Title"
/>

Yields:

<head>
    <title>Nested Title | MyAwesomeWebsite.com</title>
</head>

Duplicate meta and/or link tags in the same component are preserved

<Helmet
    link={[
        {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
        {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
    ]}
/>

Yields:

<head>
    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png">
</head>

Duplicate tags can still be overwritten

<Helmet
    link={[
        {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
        {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
    ]}
/>
<Helmet
    link={[
        {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"}
    ]}
/>

Yields:

<head>
    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png">
</head>

Only one base tag is allowed

<Helmet
    base={{"href": "http://mysite.com/"}}
/>
<Helmet
    base={{"href": "http://mysite.com/blog"}}
/>

Yields:

<head>
    <base href="http://mysite.com/blog">
</head>

License

MIT

More Examples

react-helmet-example

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React Helmet Itemprop

Examples

Features

Installation

Server Usage

As string output

As React components

Use Cases

License

More Examples