Be notified of new releases
Create your free GitHub account today to subscribe to this repository for new releases and build software alongside 28 million developers.Sign up
This is the first beta release of React Intl v2!
React Intl v2 has been promoted from preview release to beta because we feel it's now feature complete and ready to move forward towards a release candidate once the test suite has been filled out and the docs have been updated.
Details and discussion: #162
$ npm install react-intl@next
New Breaking Changes
Removed Function-As-Child Support from
In the last React Intl v2 preview release support for React 0.13 was dropped. This meant that
<IntlProvider> no longer needs to support the function-as-child pattern, because in React 0.14
context is parent-based.
now prop to
This change is to align with
initialNow prop, and the new stabilized initial rendering and "ticking" of relative times.
The React Intl v2 preview releases contained an undocumented, experimental
<FormattedGroup> component which has now been removed. This component took the function-as-child pattern to its extreme and in real apps it was never needed.
Added Stabilized "now" Time and "tick" Support to Relative Times
initialNow prop has been added to
<IntlProvider> to stabilize the reference time when formatting relative times during the initial render. This prop should be set when rendering a universal/isomorphic React app on the server and client so the initial client render will match the server's checksum.
On the server,
Date.now() should be captured before calling
ReactDOM.renderToString() and passed to
<IntlProvider>. This "now" value needs to be serialized to the client so it can also pass the same value to
<IntlProvider> when it calls
Relatives times formatted via
<FormattedRelative> will now "tick" and stay up to date over time. The
now prop has been renamed,
initialNow to match and override the same prop on
<IntlProvider>. It also has a new
updateInterval prop which accepts a number of milliseconds for the maximum speed at which relative times should be updated (defaults to 10 seconds).
Special care has been taken in the scheduling algorithm to display accurate information while reducing unnecessary re-renders. The algorithm will update the relative time at its next "interesting" moment; e.g., "1 minute ago" to "2 minutes ago" will use a delay of 60 seconds even if
updateInterval is set to 1 second.
Added Fallback Process When Locale Data is Missing
A common problem people are facing is having some parts of the app, namely the ones that use
<FormattedTime> rendering properly in the
locale they set. While other components like
<FormattedRelative> render in English. This is happening because the locale data hasn't been loaded and registered with React Intl.
Now, a warning will be logged when this situation is encountered and the app will fallback to rendering everything in the default locale: English.
displayName to Components
All React Intl components now define a
diaplayName static property so that are easier to see in the React DevTools when running minified code. Uglify was minifying
<b> which was extremely confusing.
Improved Babel Plugin
email@example.com now has improved error and warning messages, including a warning when someone is using the Babel plugin and also using
<FormattedPlural> since strings are not extracted from
Backslash-escaping issues when extracting messages have been addressed.
firstname.lastname@example.org has been released with support for escaping backslashes themselves.
One wrinkle with strings declared in JSX is that they are double-escaped like XML/HTML. This means that if backslash-escaping is needed when using
<FormattedMessage>, this must be taken into account, or be wrapped in
injectIntl()to work with stateless component functions.
- Fixed function-as-child calls to use function invocation instead of method invocation.
- Fixed yahoo/babel-plugin-react-intl#13: Backslash-escaping now works correctly with messages extracted via the Babel plugin.