New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

storybook-addon-locale

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-locale

A storybook addons that lets you select locale from the list

  • 0.3.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

storybook-addon-locale

A storybook addons that lets you select locale from the list.

Example

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

import 'storybook-addon-locale/register';

Configuration

Following options are available:

  • locales
  • defaultLocale
  • enableLocaleLockButton
  • setLocaleKnob

Set addon options in your config.js file.

locales

import { addParameters } from '@storybook/react';

addParameters({
  locales: ['en', 'fr'],
  defaultLocale: 'en',
});

This options can also take object of data:

import { addParameters } from '@storybook/react';

addParameters({
  locales: {
    en: { dir: 'ltr', name: 'English', text: 'English' },
    fa: { dir: 'rtl', name: 'Persian', text: 'فارسی' },
  },
});

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:

export default {
  component: MyComponent,
  parameters: { locales: ['en', 'fr'] },
  title: 'locale test',
};

Or for specific story:

MyComponentStory.story = {
  parameters: {
    locales: ['en', 'fr'],
  },
};

To disable locale for specific stroy set locale to false as follow:

MyComponentStory.story = {
  parameters: {
    locales: false,
  },
};

defaultLocale

To set default local storybook:

import { addParameters } from '@storybook/react';

addParameters({
  locales: ['en', 'fr'],
  defaultLocale: 'en',
});

Or inside story file:

export default {
  component: MyComponent,
  parameters: { defaultLocale: 'en' },
  title: 'locale test',
};

enableLocaleLockButton

To show a button in toolbar for locking selected locale for entire stories:

import { addParameters } from '@storybook/react';

addParameters({
  locales: ['en', 'fr'],
  enableLocaleLockButton: true,
});

setLocaleKnob

When set to true the knob-locale will be set:

import { addParameters } from '@storybook/react';

addParameters({
  setLocaleKnob: true,
});

Story integration

This addon come with two type of hooks:

  • useLocale
  • useLocaleData

useLocale will return locale code:

import { useLocale } from 'storybook-addon-locale';

function MyComponent(context) {
  const locale = useLocale(context);

  return (
    <div>
      {locale === 'en' && <div>English</div>}
      {locale === 'fr' && <div>French</div>}
    </div>
  );
}

useLocaleData will return locale data as an object:

import { useLocaleData } from 'storybook-addon-locale';

function MyComponent(context) {
  const localeData = useLocaleData(context);

  return (
    <div>
      {localeData && localeData.locale === 'en' && <div>{localeData.text}</div>}
      {localeData && localeData.locale === 'fa' && <div>{localeData.text}</div>}
    </div>
  );
}

You can also listen for the locale change event as follow:

import addons from '@storybook/addons';
import { LOCALE_EVENT_NAME } from 'storybook-addon-locale';

// get channel to listen to event emitter
const channel = addons.getChannel();

// create a component that listens for the event change
function MyComponent() {
  // this example uses hook but you can also use class component as well
  const [localeData, setLocale] = useState();

  useEffect(() => {
    // listen to change
    channel.on(LOCALE_EVENT_NAME, setLocale);
    return () => channel.off(LOCALE_EVENT_NAME, setLocale);
  }, [channel, setLocale]);

  return (
    <div>
      {localeData && localeData.locale === 'en' && <div>{localeData.text}</div>}
      {localeData && localeData.locale === 'fa' && <div>{localeData.text}</div>}
    </div>
  );
}

FAQs

Package last updated on 25 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc