React-boilerplate: using react-helmet with react-intl

[hieubq90]

Hi.
I want to change page's title when locale has changed.
Dose anyone try to do this?

[theotow]

It should be simple, just use the formatMessage method provided through the react context of react-intl

add react-intl to your file

import { intlShape } from 'react-intl';

ComponentName.contextTypes = {
   intl: intlShape
}

in the render

render () {
   return (
     <div>
       <Helmet
          title={this.context.intl.formatMessage(messages.yourmessage)
        />
     </div>
   )
}

that should do the trick

[justingreenberg]

nice... for helmet specifically i tend to create thin wrappers with injectIntl to inject instance, and then pass the defined messages as props from parent container

import React from 'react'
import { injectIntl, intlShape } from 'react-intl'

export const HelmetIntl = ({
  intl: { formatMessage },
  messages: { title },
  children, ...props
}) =>
  <div>
    <Helmet title={formatMessage(title)} {...props} />
    {React.Children.only(children) || null}
  </div>

HelmetIntl.propTypes = {
  intl: intlShape.isRequired,
  messages: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    children: React.PropTypes.node.isRequired
  }).isRequired
}

export default injectIntl(HelmetIntl)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.