Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Example for v3 API #60

Merged
merged 4 commits into from
Aug 20, 2018
Merged

Update Example for v3 API #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00ccda7
Upgrade to react-head v3 API
tizmagik Aug 19, 2018
2c0229d
Fix example app
tizmagik Aug 20, 2018
666f903
Add cascading example
tizmagik Aug 20, 2018
5dbbd6d
Docs update
tizmagik Aug 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Asynchronous SSR-ready Document Head management for React 16.3+

## Motivation

This module allows you to define `document.head` tags anywhere in your component hiearchy. 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+.
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)

Expand All @@ -26,10 +26,10 @@ yarn add react-head

1. You wrap your App with `<HeadProvider />`
1. From the server, you pass `headTags[]` array to `<HeadProvider />`
1. Then call `renderToString(headTags)` and include in the `<head />` block of your server template
1. Then call `renderToStaticMarkup(headTags)` and include in the `<head />` block of your server template
1. To insert head tags within your app, just render one of `<Title />`, `<Meta />`, `<Style />` and `<Link />` components as often as needed.

On the server, the tags are collected in the `headTags[]` array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent pageloads need to change the head tags).
On the server, the tags are collected in the `headTags[]` array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).

> You can view a fully working sample app in the [/example](/example) folder.

Expand All @@ -45,7 +45,6 @@ import App from './App';

// ... within the context of a request ...

const context = {};
const headTags = [];
const app = renderToString(
<HeadProvider headTags={headTags}>
Expand Down
5 changes: 3 additions & 2 deletions example/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@

Example app showing `react-head` usage.

- Check out [server.js](/example/src/server.js) for server setup example
- Check out [Home.js](/example/src/Home.js) for client usage
* Check out [server.js](/example/src/server.js) for server setup example
* Check out [client.js](/example/src/client.js) for client setup example
* Check out [Home.js](/example/src/Home.js) for app usage example
Loading