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.

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

fix: add whitelist prop to HeadProvider #84

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
24 changes: 12 additions & 12 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"dist/index.umd.js": {
"bundled": 7927,
"minified": 3450,
"gzipped": 1418
"bundled": 8390,
"minified": 3665,
"gzipped": 1514
},
"dist/index.min.js": {
"bundled": 7797,
"minified": 3337,
"gzipped": 1367
"bundled": 8260,
"minified": 3552,
"gzipped": 1461
},
"dist/index.cjs.js": {
"bundled": 6579,
"minified": 3674,
"gzipped": 1298
"bundled": 7026,
"minified": 3889,
"gzipped": 1393
},
"dist/index.esm.js": {
"bundled": 6191,
"minified": 3361,
"gzipped": 1204,
"bundled": 6638,
"minified": 3576,
"gzipped": 1297,
"treeshaked": {
"rollup": {
"code": 420,
Expand Down
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,27 @@ const App = () => (
);
```

## Disable data-rh attribute

`<HeadProvider/>` accepts an optional prop `whitelist` which accepts a comma separated CSS selector string just like `document.querySelector`. This allows `react-head` to know which tags it controlls without the need for the `data-rh` attribute, which might lead to problems with some HTML parsers of SEO tools for example.

### Example

```jsx
// on the server
<HeadProvider headTags={headTags} whitelist="title,[name="description"],[property^="og:"]">
CanRau marked this conversation as resolved.
Show resolved Hide resolved
<App />
</HeadProvider>

// in the client
<HeadProvider whitelist="title,[name="description"],[property^="og:"]">
<div id="app">
<Title>Title of page</Title>
// ...
</div>
</HeadProvider>
```

## Contributing

Please follow the [contributing docs](/CONTRIBUTING.md)
2 changes: 1 addition & 1 deletion example/src/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { HeadProvider } from 'react-head';
import App from './App';

hydrate(
<HeadProvider>
<HeadProvider whitelist="title">
<App />
</HeadProvider>,
document.getElementById('root')
Expand Down
7 changes: 6 additions & 1 deletion src/HeadProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,15 @@ export default class HeadProvider extends React.Component {
}
headTags.push(tagNode);
},

whitelist: this.props.whitelist || ``,
};

componentDidMount() {
const ssrTags = document.head.querySelectorAll(`[data-rh=""]`);
const whitelist = `${this.state.whitelist}`
? `,${this.state.whitelist}`
: ``;
const ssrTags = document.head.querySelectorAll(`[data-rh=""]${whitelist}`);
tizmagik marked this conversation as resolved.
Show resolved Hide resolved
// `forEach` on `NodeList` is not supported in Googlebot, so use a workaround
Array.prototype.forEach.call(ssrTags, ssrTag =>
ssrTag.parentNode.removeChild(ssrTag)
Expand Down
6 changes: 5 additions & 1 deletion src/HeadTag.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ export default class HeadTag extends React.Component {
return ReactDOM.createPortal(ClientComp, document.head);
}

const ServerComp = <Tag data-rh="" {...rest} />;
// disable `data-rh` if <HeadProvider whitelist /> matches Tag
const dataAttribute = `${headTags.whitelist}`.split(`,`).includes(Tag)
? {}
: { 'data-rh': `` };
const ServerComp = <Tag {...dataAttribute} {...rest} />;
headTags.addServerTag(ServerComp);
return null;
}}
Expand Down