Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
staylor committed May 2, 2018
1 parent 488153b commit 993d587
Showing 1 changed file with 17 additions and 8 deletions.
25 changes: 17 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# react-helmet-async

This package is a fork of [React Helmet](https://github.com/nfl/react-helmet).
`<Helmet>` usage is synonymous, but SSR is radically different.
`<Helmet>` usage is synonymous, but server and client now requires `<HelmetProvider>` to encapsulate state per request.

`react-helmet` relies on `react-side-effect`, which is not thread-safe. If you are doing anything asynchronous on the server,
you need Helmet to to encapsulate data on a per-request basis, this package does just that.
`react-helmet` relies on `react-side-effect`, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to to encapsulate data on a per-request basis, this package does just that.

## Usage

The main way that this package differs from `react-helmet` is that it requires using a Provider to encapsulate Helmet state for your React
tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:
The main way that this package differs from `react-helmet` is that it requires using a Provider to encapsulate Helmet state for your React tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Helmet, { HelmetProvider } from 'react-helmet-async';

const app = (
Expand All @@ -25,14 +25,21 @@ const app = (
</App>
</HelmetProvider>
);

ReactDOM.hydrate(
app,
document.getElementById(‘app’)
);
```

On the server, we will no longer use static methods to extract state. `react-side-effect`
exposed a `.rewind()` method, which Helmet used when calling `Helmet.renderStatic()`. Instead, we are going
to pass a `context` prop to `HelmetProvider`, which will hold our state specific to each request.

```javascript
import { HelmetProvider } from 'react-helmet-async';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Helmet, { HelmetProvider } from 'react-helmet-async';

const helmetContext = {};

Expand All @@ -48,9 +55,11 @@ const app = (
</HelmetProvider>
);

const html = renderToString(app);

const { helmet } = helmetContext;

// helmet.title.toString() etc...
// helmet.title.toString() etc
```

## Streams
Expand Down Expand Up @@ -104,4 +113,4 @@ renderToNodeStream(app)

## License

Licensed under the MIT License, Copyright © 2018 Scott Taylor
Licensed under the Apache 2.0 License, Copyright © 2018 Scott Taylor

0 comments on commit 993d587

Please sign in to comment.