Skip to content

Latest commit

 

History

History
55 lines (43 loc) · 1.14 KB

File metadata and controls

55 lines (43 loc) · 1.14 KB

Add Internationalization support

References

React Internationalizion Library

Install react-intl

yarn add react-intl 

Update stories/index.stories.js to add IntlProvider which supplies local info to the application

import React from 'react';
import { storiesOf } from '@storybook/react';
+ import { IntlProvider } from 'react-intl';

import { Movies } from '../src/Movies';

storiesOf('Movies', module)
+  .addDecorator((getStory) => (
+    <IntlProvider locale="en">
+      { getStory() }
+    </IntlProvider>
+  ))
  .add('storybook', () => <Movies/>);

Update src/Movies.js

import React from "react";
+ import { FormattedMessage } from 'react-intl';

export class Movies extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
+    const name = 'Jeff';

+    return (
+      <div>
+        <FormattedMessage
+          id="hello"
+          defaultMessage='Hello {name}!!'
+          values={{name: name}}/>
+      </div>);
-      return (<div>Hello Jeff!!</div>);
  }
}

Proceed to Step 5 - Add Material UI support