# React Safety Helmet
[](https://www.npmjs.org/package/react-safety-helmet)
[](https://codecov.io/gh/openameba/react-safety-helmet)
[](https://travis-ci.org/openameba/react-safety-helmet)
[](https://david-dm.org/nfl/react-helmet)
A fork of react-helmet that support for renderToNodeStream and thread safe with the power of redux
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.
*This is a fork of [react-helmet](https://github.com/nfl/react-helmet).*
## Example
```javascript
import React from "react";
import {Helmet} from "react-safety-helmet";
class Application extends React.Component {
render () {
return (
My Title
...
);
}
};
```
Nested or latter components will override duplicate changes:
```javascript
import ReactDOM from 'react-dom';
import { HelmetProvider, createHelmetStore } from 'react-safety-helmet';
function bootstrap() {
const helmetStore = createHelmetStore();
ReactDOM.render(
My TitleNested Title,
document.getElementById('app')
);
}
```
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.
## Installation
Yarn:
```bash
yarn add react-safety-helmet
```
npm:
```bash
npm install --save react-safety-helmet
```
## Server Usage
To use on the server, call `store.renderStatic()` after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup` to get the head data for use in your prerender.
```javascript
import { createHelmetStore, HelmetProvider } from 'react-safety-helmet';
const helmetStore = createHelmetStore();
ReactDOMServer.renderToString(
);
const helmet = helmetStore.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
);
}
```
## Server Usage with `ReactDOMServer.renderToNodeStream()` and `ReactDOMServer.renderToStaticNodeStream()`
``` javascript
new Promise((resolve, reject) => {
const helmetStore = createHelmetStore();
let body = '';
ReactDOMServer.renderToNodeStream(
,
)
.on('data', (chunk) => {
body += chunk;
})
.on('error', (err) => {
reject(err);
})
.on('end', () => {
resolve({
body,
helmet: helmetStore.renderStatic(),
});
});
}).then(({body, helmet}) => {
// Create html with body and helmet object
});
```
## Reference Guide
```javascript
My 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) callback that tracks DOM changes */}
onChangeClientState={(newState) => console.log(newState)}
>
{/* html attributes */}
# React Safety Helmet
[](https://www.npmjs.org/package/react-safety-helmet)
[](https://codecov.io/gh/openameba/react-safety-helmet)
[](https://travis-ci.org/openameba/react-safety-helmet)
[](https://david-dm.org/nfl/react-helmet)
A fork of react-helmet that support for renderToNodeStream and thread safe with the power of redux
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.
*This is a fork of [react-helmet](https://github.com/nfl/react-helmet).*
## Example
```javascript
import React from "react";
import {Helmet} from "react-safety-helmet";
class Application extends React.Component {
render () {
return (