https://github.com/tarabyte/react-storybook-addon-intl

React Storybook Intl Addon
https://github.com/tarabyte/react-storybook-addon-intl

Last synced: about 2 months ago
JSON representation

React Storybook Intl Addon

• Host: GitHub
• URL: https://github.com/tarabyte/react-storybook-addon-intl
• Owner: Tarabyte
• License: mit
• Created: 2016-06-27T22:14:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-24T08:13:12.000Z (over 7 years ago)
• Last Synced: 2024-10-06T03:56:19.821Z (3 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 20
• Watchers: 2
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Storybook Intl Addon

A React Storybook i18n addon to see component stories under different locales.

[![Demo](http://i.giphy.com/E9qNu695CA9RC.gif)](https://youtu.be/jZkQ9E9-cZs)

## Usage

> Assuming you have `@kadira/storybook` and `react-intl` installed.

* Install module using npm.

```

npm install --save-dev react-storybook-addon-intl

```

* Add addon inside storybook config file (`./.storybook/config.js`).

```javascript

import { configure, setAddon } from '@kadira/storybook';

import IntlAddon from 'react-storybook-addon-intl';

setAddon(IntlAddon); // set addon

// the rest configuration goes here

const loadStories = () => {

  // tell storybook how to load stories

};

configure(loadStories, module);

```

* Tell stories using `addWithIntl` method.

```javascript

import { storiesOf } from '@kadira/storybook';

// Lets say Button is using react-intl component FormattedMessage

// to display localized caption.

import Button from './Button';

// add locale data for every locale you are going to use

import { addLocaleData } from 'react-intl';

import ru from 'react-intl/locale-data/ru';

addLocaleData(ru);

storiesOf('Button', module)

  .addWithIntl('Localizable Button', () => (), {

    'ru-RU': { 'button.caption': 'Нажми меня! (ru-RU)' },

    /* ... */

  });

```

> Take a look at [this example](example/Button-story.js) to learn more.