nfl / react-helmet Goto Github PK

View Code? Open in Web Editor NEW

17.2K 17.2K 654.0 2.1 MB

A document head manager for React

License: MIT License

JavaScript 100.00%

helmet react side-effect

react-helmet's People

Contributors

Stargazers

Watchers

Forkers

snow01 justdevbaby joeybaker sugarshin cwelch5 modulexcite necolas chrisbuttery beeant lelandrichardson cesarandreu treyhuffine katt gaearon horizonxp kib357 romanonthego miraks adamjv90 mcanthony esjoman hghazal poyhsiao apprennet bryanrsmith beanhunter moonion lemoncms athomann sergesemashko ewindso evenchange4 duataud moviepilot bloodyenterprise danielecammarata anaibol olegpesok rarous jmurzy veeracs jwhiting singggum3b gbhasha b2whats jonjaques mull pierreavizou lxe marksanghoonkim chikathreesix sherpic krambertech refinery29 srph coerick ichengyc aviarenfeld anorudes artazor rmoorman sbaway arielledubois zc828 jmyworks dattran92 node-modules-list sebmak matthewheck brendean johnsonchandra mihirsoni emaxerrno peleg bassettsj homebrewerluke brokentone tjmehta ide justin-lau antonini bountylabs magus digideskio terrysahaidak koenpunt sanjibnarzary artzanko atom2ueki webappcreations jackerjay scalasbm duyquoc 931743010 klbjlabs nic269 szwork2013 imjerrybao peterabsolon download

react-helmet's Issues

Release of patch version for 0.14.0-beta React versions

Hello. Thanks for the great lib! It is a great improvement over original <DocumentTitle />.

I'm trying to install it it an App with React 0.14.0-beta3 and I see a fix f9320ce But I can't use this version because if i specify

...
"react-helmet": "nfl/react-helmet",
...

then I get Module not found: Error: Cannot resolve module 'react-helmet' in ..., I suppose, because dist folder is missing in the repository.

So, please, could you build and publish this fixed version to npm? Or, even better, it would be great if there will be no peerDependencies section at all #30

Allow react 0.14.0-beta1 as peer dependency

Would you consider allowing react 0.14.0-beta1 as a peer dependency?

I haven't tried react-helmet with react 0.14.0-beta1 yet, but from glancing at the code it looks like 0.14.0-beta1 should work.

For reference, a project that support react 0.14.0-beta1 is react-dnd, they declare the peer dependency is declared as:

{
  "peerDependencies": {
    "react": ">=0.13.0 <0.15.0 || 0.14.0-beta1"
  }
}

Cannot read property 'Component' of undefined

Getting this from PlainComponent.js:36

I am creating a static site using react with static-site-generator-webpack-plugin with react-router.
This is the static renderer code.

export default (locals, callback) => {
    match({ routes: routeConfig,  location: locals.path }, (error, redirectLocation, renderProps) => {
        const __html = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);
        const reactApp = {
            __html,
        };
        const head = Helmet.rewind();
        const html = ReactDOMServer.renderToStaticMarkup(<HTML reactApp={reactApp} {...head}/>);
        callback(null, '<!DOCTYPE html>' + html);
    });
};

Data missing when loading from separate module?

Consider the following structure:

my-app/
   node_modules/
      my-common-build/
         src/
            template.jsx
            prerender.js
   src/
      routes.jsx
      home.jsx

My application is using react-router, and i am generating an index.html file for each route during my webpack build using html-webpack-plugin. For each route, in my prerender script, i am executing the following (stripped out the routingContext piece, since the issue can be recreated as so):

var Template = require('./template');
var routes = require(path.join(process.cwd(), '/src/routes'));
var Home = require(path.join(process.cwd(), '/src/home'));

match({routes: routes, location: route, basename: basename}, function(err, redirect, next) {
   var finalMarkup = ReactDOMServer.renderToString(
      React.createElement(
         Template,
         null,
         React.createElement(
            Home,
            null
         )
      )
   );

   var head = Helmet.rewind();
   console.log(head.title.toString()) // <title data-react-helmet="true"></title>
});

In Home.jsx, i have the following:

export default React.createClass({
   render() {
      return (
         <div>
            <Helmet title="Home Page" />
            //content
         </div>
      )
   }
});

If i provide the same Helmet usage inside of the template file that lives in the same project as the prerender script, i get the configuration back for the title, but the moment i move it out into the Home component, nothing is returned.

After adding Helmet to both the template and the home components, it is always returning the template's result, but if i add logging in the home component, it has the correct value when logged from there. I am starting to think that there are 2 global instances of helmet (one per module) in this situation. Thoughts?

Helmet title update causes Chrome to reload fonts when CSS file included in link attribute

My Application component has a Helmet reference similar to the following:

<Helmet
    titleTemplate='%s | My Site'
    link={[
        rel:'stylesheet', type:'text/css','href':'http://<domain>/myfont.css'}
    ]}
/>

and the only content within the CSS file is a few font-face declaration for the various weights of the font:

@font-face {
    font-family: 'MyFont';
    src: url('MyFont-Regular.eot');
    src: url('MyFont-Regular.eot?#iefix') format('embedded-opentype'),
         url('MyFont-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'MyFont';
    src: url('MyFont-Regular-Oblique.eot');
    src: url('MyFont-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
         url('MyFont-Regular-Oblique.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'MyFont';
    src: url('MyFont-Medium.eot');
    src: url('MyFont-Medium.eot?#iefix') format('embedded-opentype'),
         url('MyFont-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

With this set up, any time the title updates, I see a Flash of Invisible Text (FOIT) while Chrome reloads the font. This is occurring within an infinite scrolling context where the page title updates regularly and also occurs when navigating between different routes in the app. When I hardcode the <link> tag with the CSS file, the FOIT doesn't happen and the type doesn't flash when the page changes. I'm only seeing this issue in Chrome; I tested in Firefox and Safari and neither showed the behavior. Is my usage incorrect or is there an underlying issue with how Chrome interacts with Helmet?

Helmet.rewind() returning undefined

const head = Helmet.rewind();

I am getting undefined for above code on server side ?

Flash of unset title / title set to '' when undefined or null

There are certain cases in which props are passing an empty title before a re-render occurs (for example while waiting for async data).

This leads to "flash of unset title" in the browser which it could be considered a strange behaviour from a user-perspective.

Other times, something can go wrong and a title is completely empty. I think it's better to keep the previous title instead of setting it to ''.

I fixed this client side by adding a simple control in Helmet.jsx here: https://github.com/zimok/react-helmet/blob/master/src/Helmet.jsx#L127

Cant render stringified meta tags on server

Helmet.rewind() returns a collection of meta tags as strings.

In my isomorphic/universal app, I have an HTML component that I render on the server:

render() {
  return (
    <html>
      <head>
        {this.props.head.meta}
        <link rel='some existing tags" />
      </head>
      ...
    </html>
  )
}

I render this component to a string React.renderToStaticMarkup(htmlComp);

In this case this.props.head.meta is the string of meta tags i get back from the rewind.

Printing raw strings like this in React wont work of course, it gets escaped. I can't use dangerouslySetInnerHtml on the <head> because it will clobber my existing tags such as the <link>.

The README doesn't explain this very clearly.

What's the intended implementation of the server rendering?

Problem with unicode as meta description content

I'm having problem with using Japanese texts for meta description.
Seems that the problem is caused by HTMLEntities.encode.

Webpack and CommonsChunksPlugin

My app has SSR and separate chunks that I load via require.ensure and CommonsChunkPlugin from webpack.

This is what my chunks look like:

{ 
   publicPath: '/assets/',
   assetsByChunkName: {
      main: [ 'web.js', 'style.css', 'web.js.map', 'style.css.map' ],
      producer: [ '1.web.js', '1.web.js.map' ],
      common: [ 'common.web.js', 'common.web.js.map' ]
   }
}

When I use react-helmet, I'm running into as I load the producer chunk.

common.web.js:1 Uncaught TypeError: Cannot read property 'call' of undefined)...

I really don't know what's happening here, maybe someone can help. Many thanks.

SSR tags get replaced on first render

Hello,

Thanx for this great library and the fix for FOUC.

Thast said, there is still a very small problem when using SSR + Client react
When using toComponent on the server render.

{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
{head.script.toComponent()}

The function will output a Element with the data-reactid attribute.

The when react is run on the client, these tags will then be replaced because the equation in updateTags failes return newElement.isEqualNode(existingTag);.

Because the new tag does not have adata-reactid attribute.

In the dropin replacement i created when there was that FOUC problem i could fix this, by removing the data-reactid attribute from the existing tags. (https://github.com/lemonCMS/react-helmet/blob/master/README.md). I hope this can help you.

Kind regards
Raymond

no docs on how client needs to use peek() instead of rewind()

at least you get an error though: Uncaught Error: You may ony call rewind() on the server. Call peek() to read the current state. but then when you do the following:

import helmet from 'react-helmet';

export default class Header extends Component {
  componentWillMount() {
    console.log('peek', helmet.peek());
  }
}

you get undefined ... can you elaborate client side use for reading meta tags?

Issue with charset

Hello guys, i'm trying to render meta tags on server and got unexpected html-entities in content attribute (Russian text, UTF-8)
<meta data-react-helmet="true" name="title" content="&Fcy;&acy;&scy;&acy;&dcy;&ncy;&ycy;&iecy; &rcy;&acy;&bcy;&ocy;&tcy;&ycy; - &zcy;&acy;&kcy;&acy;&zcy;&acy;&tcy;&softcy; &pcy;&ocy;&dcy; &kcy;&lcy;&yucy;&chcy; &vcy; &Mcy;&ocy;&scy;&kcy;&vcy;&iecy; &icy; &Mcy;&ocy;&scy;&kcy;&ocy;&vcy;&scy;&kcy;&ocy;&jcy; &ocy;&bcy;&lcy;&acy;&scy;&tcy;&icy;"/>
... but on client side everything works well!
Anyone has a idea where might be the problem?

innerHTML for inline scripts tags

hey.
we have been working on the project that requires using schema.org metadata.
it is turned out that most useful and rational way is to use ld+json notation (https://developers.google.com/schemas/formats/json-ld?hl=en)
so wee need not only have support for

{src: "http://include.com/pathtojs.js", type: "text/javascript"}

but also for

{
  name: "company",
  type: "application/ld+json"
  innerHTML: `
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "url": "${url}",
      "logo": "${requrie('logo.png')}"
    }
  `
}

to result in something like:

<script name="company" type="application/ld+json" data-react-helmet="true">
  {
    "@context": "http://schema.org",
     "@type": "Organization",
     "name": "Whitescape",
     "url": "http://site.com",
    "logo": "http://site.com/assets/[email protected]"
  }
</script>

I already have working solution in our company fork, so if you are interesting i'll finish this, add some test and send a pull request.

p.s.
yes it will allow to use a inline scripts in Helmet and possibly shoot yourself in the foot, but since it is a "A document head manager for React" Helmet should cover everything you may want in document head, is it not?

Add typescript support

Add a .d.ts definition file for definitelyTyped.

Why the project uses peerDependencies section?

Actually, I need it in React 0.12.2, but installation failed.
Does project use some react >=0.13 specific features in runtime? It looks like react >=0.13 need only for ES6 is isn't it?

Thanks!

Attribute data strings with escape characters

With meta tag as

{ "name": "description", "content": "My 'quoted' string" },

This ends up with the single quotes getting replaced with '
Nothing including the String.fromCodePoint and escaping works.

Is there any way to escape this? Considering quotes can be in a lot of places in the meta tag, like the above example with description.

Fix react v0.14.0-rc1 warning

Warning: SideEffect(Helmet)(...): React component classes must extend React.Component.

It's caused by react-side-effect, so once they release an update it should only require updating the version that react-helmet uses.

Associated issue: gaearon/react-side-effect#16

Cannot find module "he"

Just installed via npm, required it in a React component and when launch server I got this:

ERROR in ./~/react-helmet/dist/Helmet.js
Module not found: Error: Cannot resolve module 'he'

Using npm 2.7.0

Meta tags not rendered

Constant TAG_PROPERTIES doesn't contain "CONTENT", and this example:
meta={[
{"name": "description", "content": "Helmet application"},
{"property": "og:type", "content": "article"}
]}
not render anything.

Recalculate title on routing

I use react-router and have the following structure:

<Route component={App}>
  <Route component={Component1} path="/" />
  <Route component={Component2} path="/path2" />
</Route>

App has <Helmet title="" titleTemplate="%sTestSite />
Component 1 has <Helmet title="Component1 of "/>
Component 2 doesnt' have Helmet-tag

The issue is, that if I navigate from Component1 to Component2 (client-side) title is not reset to the default, but still shows Component1 of TestSite.

I do plan to set titles in all relevant components, but lack of reset complicates development

any possible way to disable 'data-react-helmet="true"' from server side rendering?

i don't mind if its in the client but i don't like these extra chars in my markup.

any suggestions?
thanks

Do not run on client

Hello!
Is there a option to don't run on client?

Cannot change meta data dynamically client side

I cannot seem to change the meta data from the client side. When I change the "meta" state attribute, the change seems only be queued. It is only activated when I make another change to the dom, like changing the title for example.

For instance, if my state changing function looks like this:

var meta = [{"name": "keywords", "content": "default"}, {"charset": "UTF-8"}];     
foo(bar) {
  var newMeta = this.state.meta;
  newMeta[0].content = bar;
  this.setState({
    meta: newMeta
  })
},

And my "Helmet" looks like this:

<Helmet meta = {this.state.meta}
    title = {this.state.title} />

When foo(bar) is called, "default" never changes to bar.

However if my function looks like this:

foo(bar) {
  var newMeta = this.state.meta;
  newMeta[0].content = bar;
  this.setState({

    // <-- CHANGE
    title: bar,
    // -->

    meta: newMeta
  })
},

Then both the title and the meta tag change successfully.

aggregate script tags

Currently, it appears that if a parent component/page uses helmet with script tags, and a child component also uses script tags, the child script tags will replace the parent script tags. I would like the ability for these scripts to be aggregated such that parent scripts would be combined or aggregated with the child scripts so that all the necessary scripts are properly loaded into the head.

Use `title` and `titleTemplate` in other tags.

I am rendering open graph and twitter meta tags and I would like to set the og:title and twitter:title content values to the same as what you render by combining the title and titleTemplate props. Is there a way to set those content values using that same process?

server rendering returns <noscript></noscript> where <Helmet /> is implemented

my React Component:

render() {
    return (
        <div id="home">
            <Helmet title="Home" />
            <h2>test dict</h2>
        </div>
    )
}

my rendred markup (using renderToStaticMarkup):

<div id="app">
    <div id="home">
        <noscript></noscript>
        <h2>Home</h2>
    </div>
</div>

is there any way around this issue?
thanks.

add script property to helmet?

I started to play around with helmet in my isomorphic app and realized how much it simplifies meta-data-related stuff.
I now believe it would be very useful to collect scripts through helmet to increase modularity of SPAs even more. It also would make it easier to manage multiple SPA.

Let me elaborate on this idea:

If you have a eg. Blog-app, it concerns me to bundle everything up and send it to the client.
I consider it good practice to make multiple bundles for eg. the user-view and the admin-view for mainly 2 reasons:

minimize size of bundle
increase security by not exposing admin-script-logic to the client

With webpack or browserify you can explicitly define what and how to bundle together.
Still you need to rely to some logic (plugins) to figure out which pages need which bundles and embed this bundles to your server-rendered html. I think Helmet provides a good opportunity to automate this task and remove the need for certain plugins.

Once you have Helmet figured out which Scripts are required by which Page, you could even dynamically bundle the scripts with webpack if not found/up-to-date.

Example(sketch):

//blog.js

import {stores,actions,controller} from "blogController"

export const Blog = ({title,meta,children})=>(
 <div>
  <Helmet meta={meta} title={title}  script={[{src:__filename}]} />
  <Link to="allPosts/" />
  {children}
  </div>
)

export const routes = (
  <Route component={Blog} >
    // <Route /> some more routes
  </Route> )

//admin.js
import {blog,routes:blogRoutes} from "./blog"
// controller, components, routes...

//server.js

/*do the routing */
const body = renderToString(myComponent);
const {meta,link,title,scripts} = Helmet.rewind();
const html = `
<html>
<head>
${title}
$(meta} 
${link}
</head>
<body>
${body}
${scripts} 
</body>
</html>

//check if scripts exists and are up-to-date otherwise compile...
res.send(html)

Once a script param is introduced into helmet, there are two question left:

how should it behave on the client?
I suggest implementing the script-param as an array of object with following properties:
- type : string => the type of the script eg. "text/coffescript"
- load : boolean => should helmet inject a script tag on the client (on first occurrence)
should multiple occurences of Helmet scripts params on different places override each other or compose?
I would suggest the latter one...

What do you think?

Explain why you deprecated having children inside your Helmet components

Looking at the changelog, it seems it's related to #37 and doing fewer useless renders? It'd be good to have a 1 or 2 line sentence that explains the reason, instead of having to dig in.

Server Meta ignored when Object key starts with 'content'

Steps to reproduce:
let a = [{'name': 'description', 'content': 'This is the English META description'}];
let b = [{'content': 'This is the English META description', 'name': 'description'}];

<Helmet meta={a}/> Helmet.rewind().meta.toString() === '<meta data-react-helmet="true" name="description" content="This is the English META description"/>' //correct
<Helmet meta={b}/> Helmet.rewind().meta.toString() === '' //incorrect

Usually Object does not guarantee the key order, but:
console.log(1, a);
console.log(2, b);
Produces in browser (Chrome 47):
1 [ { content: 'This is the English META description', name: 'description' } ]
2 [ { content: 'This is the English META description', name: 'description' } ]
Produces in Node (0.12.7):
1 [ { name: 'description', content: 'This is the English META description' } ]
2 [ { content: 'This is the English META description', name: 'description' } ]

Allow to use helmet as a parent compoment

It would be nice to us Helmet as a parent component like this:

<Helmet title={this.context.intl.formatMessage({id: messageKey}>
    <div className="my-page-component">
        ...
    </div>
</Helmet>

It will avoid the need to add some unnecessary div in some case.

API Improvements.

Let me start by saying that I am not entirely sure if this is possible but I am also trying to figure this out.

I think react-helmet is awesome for isomorphic apps, however it's not super intuitive and basically completely jumps around the idea of just using head as normal in react. In a perfect world I would be able to pass react-helmet a bunch of react elements (similar to a head element) and have it extrapolate how to update this in the dom.

Essentially this:

<Helmet>
    <title>Hello World</title>
    <script src="..."/>
</Helmet>

The next step (for myself at least) would be to use helmet as the root in an isomprhic app and have it simply find the head child and take control over it.

Like this:

<Helmet>
    <html>
        <head>...</head>
        <body>...</body>
    </html>
</Helmet>

This would allow isomorphic libraries to basically pretend that react supports <head> diffing which I think would be useful.

Is something like this possible?

Helmet.rewind when using a string output on the server?

So,

I hava a function that returns a string on the server.

export default function Html(component, store){
    return `
        <!doctype html>
        <html>
            <head>
                ${head.title.toString()}
                <meta charset="utf-8"/>
                <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
                <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
            </head>
            <body>
                <div id="content">
                    ${component}
                    <script>window.__stateData = ${JSON.stringify(store.getState())}</script>
                </div>
            </body>
        </html>
    `;
}

This is what I then send to the server. Where do I call Helmet.rewind? Can't really find any example on this.

Thanks

Include minified script

Hi,
It would be great if you provided a minified version of react-helmet within the package, like react-helmet/dist/react-helmet.min.js. That would for example help optimizing for webpack:
https://christianalfoni.github.io/react-webpack-cookbook/Optimizing-rebundling.html

As high-order component

Hey there, this project is awesome.

Anyway, I think it would be nice to have / use react-helmet as HOC.

@helmet(props => ({ title: `${props.user.name}'s profile` }))
class HomeView extends Component {

Why?
I don't really want to pollute my render, and I think it would be easier where the page title lies.

Publish new version with latest changes on npm

Please and thank you :D?

Add support for <base />

https://developer.mozilla.org/en/docs/Web/HTML/Element/base

That would be nice to support others tags than just title, link & meta.

React.renderToString() and Helmet.constructor.rewind() not working

Thanks for the repo, it solves what I've been attempting to solve with <link> and <meta> tags.

Problem:

React.renderToString(<Handler />); retuns a noscript tag
Helmet.constructor.rewind() throws a

TypeError: Object function Function() { [native code] } has no method 'rewind'

Config information

npm version: 2.11.2
node version: v0.10.33
building tool: webpack with babel-loader, my exact config file is here

What I have attempted

Running this

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

class Application extends React.Component {
    render() {
        return (
                <Helmet title="My Title"/>
        );
    }
};

let app = React.renderToString(<Application />);
console.log(app);
// returns <noscript data-reactid=".tqn1t74i68" data-react-checksum="-1541140300"></noscript>

I think it was because this line was executed, i.e. it returned a null object.

I also tried running:

// throws TypeError: Object function Function() { [native code] } has no method 'rewind'
Helmet.constructor.rewind()

Then I tried:

let head = Helmet.rewind();
console.log(head);
// Output: { title: '', meta: '', link: '' }

Reduced Test Case

I don't have a reduced test case of this problem, but I'm attempting to use it this way.

Do let me know if you require more information, or if I am taking the wrong approach. Thanks!

Example universal app

Not really an issue per se, but I'm unsure of where to file this (short of sending a presumptuous PR). I've put together a no-frills, easy to understand example of a universal app using react-helmet with react and react-router. I'd like to suggest its inclusion in the docs.

react-helmet-example: https://github.com/mattdennewitz/react-helmet-example.

Thanks!

.babelrc breaks Webpack with Babel 6, deprecated options

The .bablerc contains these lines:

{
    "stage": 0,
    "blacklist": ["useStrict"]
}

which has been deprecated in Babel 6. I get the following error:

ERROR in ./~/react-helmet/dist/index.js
Module build failed: ReferenceError: [BABEL] [...]/node_modules/react-helmet/dist/index.js: Unknown option: [...]/node_modules/react-helmet/.babelrc.stage

I fixed this locally by removing .babelrc from node_modules/react-helmet but it would be great to get an update that works with the latest version of Babel without hotfixing.

Helmet.rewind() returns undefined.

Given the following code:

    const componentHTML = ReactDOMServer.renderToString(<InitialComponent />);
    const head = Helmet.rewind();
    console.log('head ', head)

head just returns undefined. Given that we're not actually passing anything INTO the rewind function, what would cause this function to return undefined? I'm just trying to wrap my head around how this function is supposed to work. I tried to peek through the src but to no avail.

Using 2.2.0

`meta` is broken when server side rendering

// react part

export default class BaseLayout extends React.Component {
  render() {
    return <div>
      <Helmet
        title={this.props.title}
        meta={[
          {'charSet': 'utf-8'},
        ]} />
      {styles}
      {this.props.children}
      {scripts}
    </div>;
  }
};

// server side rendering part

export function renderComponent(component) {
  const html = ReactDOMServer.renderToString(component);
  const head = Helmet.rewind();
  const title = head? head.title.toString(): '';
  console.log('head.meta', head.meta);
  const meta = head? head.meta.toString(): '';

  return (
    '<!DOCTYPE html>' +
    '<head>' +
      title +
      meta +
    '</head>' +
    '<body>' +
      '<div id="exseed_root">' +
        html +
      '</div>' +
    '</body>'
  );
};

// error message

TypeError: Cannot read property 'toLowerCase' of undefined
    at /Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/lib/Helmet.js:177:47
    at Array.filter (native)
    at /Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/lib/Helmet.js:141:22
    at Array.reduce (native)
    at getTagsFromPropsList (/Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/lib/Helmet.js:138:18)
    at reducePropsToState (/Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/lib/Helmet.js:443:19)
    at emitChange (/Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/node_modules/react-side-effect/lib/index.js:47:15)
    at SideEffect.componentWillMount (/Users/gocreating/projects/exseed-boilerplate/node_modules/react-helmet/node_modules/react-side-effect/lib/index.js:88:9)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactCompositeComponent.js:210:12)
    at [object Object].wrapper [as mountComponent] (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactReconciler.js:37:35)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactCompositeComponent.js:225:34)
    at [object Object].wrapper [as mountComponent] (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactReconciler.js:37:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactMultiChild.js:241:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/gocreating/projects/exseed/node_modules/react/lib/ReactDOMComponent.js:591:32)

It is the head.meta that raises error
(while head.title doesn't cause error)
Anybody know what happened?

Duplicate tag for image/x-icon not getting overwritten

In your use cases number 4 it appears that you can override existing tags. However, I am trying to override the image-x-icon tag and Helmet is not overriding the initial tag, just adding an additional one. Is this intentional for tags of this type?

html tag - lang and amp support

Looking to extend Helmet to support new attributes to add to the html tag. Most likely avoid validating html tag as their may be cases where it's just <html>, and that should obviously be a valid case.

core-js is very big

Replacing document-title with helmet made package size go up by about 100K. Appears to be due to core-js dependency. Can it be written with more generic code to remove the dependency?

Screencast: http://screencast.com/t/m7hMdadd5Y

Upstream changes to react-side-effect

You could externalise your side-effect module by applying it to react-side-effect as a fix for gaearon/react-side-effect#4

Dynamicly change title

What is the proper way to change title dynamicly on client-side?
I want to use

<Helmet title={this.getTitle.bind(this)}/>

But console brings me warnings about proptypes.
So, I can do a PR with

title: _react2["default"].PropTypes.oneOfType([   _react2["default"].PropTypes.string,
_react2["default"].PropTypes.func]),

in Helmet.js 339 string

Helmet not working with Facebook scraper.

Hi there, I've just started using Helmet to implement meta tags, so apps like Facebook and Twitter can get some useful information about my page and put it into previews. However, I notice that there is a delay between when I render a page, and when the meta tags/title get set on the page. This seems to be causing Facebook and Twitter to miss the tags, as they are not present at the instant of page load. I'm wondering if I am doing something wrong, or there is a fix I am not aware of.

I am currently using the recommended server-side technique - IE

str = React.renderToString(componentwithhelmet);
Helmet.rewind();
res.send(str)

I'm using express. And I have confirmed that when I hard code in the description (that is, it is helmet-independent), FB picks up the data.

I really like the package, but if it doesn't take care of this kind of thing, I am afraid I'll have to roll my own architecture for tags like these. Any insight would be appreciated!

Thanks,
Sam

CI build failing

WARN [preprocess]: Can not load "webpack"!

Needs new version of karma

Feature: .toDocument() which sets document.head.title etc

(I'd love to use .toComponent(), is there an example that shows how to use it? I see react-helmet-example but it is server-side.)