storybook-addon-locale
A storybook addons that lets you select locale from the list.
Installation
Install the following npm module:
npm i --save-dev storybook-addon-locale
or with yarn:
yarn add -D storybook-addon-locale
Then, add following content to .storybook/addons.js
;
Configuration
Following options are available:
- locales
- defaultLocale
- enableLocaleLockButton
- setLocaleKnob
Set addon options in your config.js
file.
locales
; ;
This options can also take object of data:
; ;
To apply ltr-rtl direction to the story, the storybook-rtl-addon must be installed. and
dir
prop must be provided as it shown above.
Or inside story file:
component: MyComponent parameters: locales: 'en' 'fr' title: 'locale test';
Or for specific story:
MyComponentStorystory = parameters: locales: 'en' 'fr' ;
To disable locale for specific stroy set
locale
to false as follow:
MyComponentStorystory = parameters: locales: false ;
defaultLocale
To set default local storybook:
; ;
Or inside story file:
component: MyComponent parameters: defaultLocale: 'en' title: 'locale test';
enableLocaleLockButton
To show a button in toolbar for locking selected locale for entire stories:
; ;
setLocaleKnob
When set to true the knob-locale
will be set:
; ;
Story integration
This addon come with two type of hooks:
- useLocale
- useLocaleData
useLocale will return locale code:
; { const locale = ; return <div> locale === 'en' && <div>English</div> locale === 'fr' && <div>French</div> </div> ;}
useLocaleData will return locale data as an object:
; { const localeData = ; return <div> localeData && localeDatalocale === 'en' && <div>localeDatatext</div> localeData && localeDatalocale === 'fa' && <div>localeDatatext</div> </div> ;}
You can also listen for the locale change event as follow:
;; // get channel to listen to event emitterconst channel = addons; // create a component that listens for the event change { // this example uses hook but you can also use class component as well const localeData setLocale = ; ; return <div> localeData && localeDatalocale === 'en' && <div>localeDatatext</div> localeData && localeDatalocale === 'fa' && <div>localeDatatext</div> </div> ;}