This project does not work anymore:
https://github.com/joscha/storybook-addon-i18n-tools

Since a rtl/ltr toggle would make sense for some languages.

Can we include one? :)

Hi,

Thanks for the addon. It currently references @kadira/storybook-addons - any chance to change it to V3 @storybook/addons? This might mean bumping the addon version and make it compatible with Storybooks 3

Maybe I missed it, but when you switch between languages, the lang attribute of the html element is not updated.

One side effect is that if you're using hyphens: auto in CSS, the browser does not know how to properly hyphenate for the current language.

There are some issues on the storybook repo related to the html lang attribute (https://github.com/storybooks/storybook/pulls?utf8=%E2%9C%93&q=lang+attribute) but my storybook implementation does not have a lang attribute, so maybe I did something wrong, but I would expect/hope the html lang attribute would change when using the language switcher, but it does not.

Is this a missing feature of this addon or have I perhaps misconfigured something?

Hi, i'm trying use this addon, but it cause this error:

I'm using the code example of the README. The error occurs when the setIntlConfig function is executed.

setIntlConfig({
    locales: ['en', 'de'],
    defaultLocale: 'en',
    getMessages
})

So, this is a bug or this addon not support RN? thanks

RN: 0.48.4
addon-intl: 2.1.2

Hi,
I'm using storybook 3.4.7, storybook-addon-intl 2.3.0.
I've added the config as per the example but when running storybook I get the error below:

Failed prop type: Invalid prop `children` of type `function` supplied to `IntlProvider`, expected a single ReactElement.
    in IntlProvider (created by WithIntl)
    in WithIntl

Is there something I'm missing?

I just setup storybook-addon-intl and it looks really nice. It does however seem to cause a problem with hot reloading while running the storybook in the development mode.

When I start the storybook up the first load works, but when I then go to my editor and make a change and press save, I get the following error:

[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

It seems to not apply the decorator for reloads. Is this something that others have hit? I haven't seen other issues or notes of it in the readme, and I'm not too experienced with the storybook, so I don't know how to approach this problem.

I'm having some trouble getting storybook-addon-intl to work with the latest version of react-intl.

After following the docs - when running yarn storybook I get the following error:

"export 'addLocaleData' was not found in 'react-intl'

My versions:

{
  "dependencies": {
    ...,
    "react-intl": "^3.2.1",
    "react": "16.9.0",
  },
  "devDependencies": {
    ...,
    "@storybook/react": "^5.2.4",
    "storybook-addon-intl": "^2.4.1",
  }
}

I've tried following the guide here with not much success: https://github.com/formatjs/react-intl/blob/master/docs/Upgrade-Guide.md#migrate-to-using-native-intl-apis

Please help.

When using with Storybook v4, the language switcher is added to every panel. See image below:

I'm trying to implement storybook-addon-intl with Enzyme for testing, I can get them to work independently but when I try to get them together I get this error

[React Intl] Could not find required intl object. needs to exist in the component ancestry.

Anyone have this issue? Cheers

Any chance you might please add support for Vue using vue-intl?

We could also accept a getMessages that returns a Promise, allowing people who fetch messages from a REST API to use them when developing the components in Storybook.

To add this feature we may need to resolve the Promise inside WithIntl (when the component is mounted and every time the locale is switched), putting the fetched messages into the state and thus triggering a re-render (that would pass the messages to IntlProvider).

Is there a way to trigger the locale change on the I18nProvider through my component's onChange handler?

It would be great if the currently selected language would be used when the canvas is opened in a new tab. Currently, there does not seem to be a way to use anything but the default language in new tabs.

Context: I am using Storybook to create screenshots of my app. Obviously I don't want the Storybook interface in the screenshots, so I'm opening each story in a new tab. So I have to change the default language if I want to take screenshots in other languages.

If issue #39 gets implemented my use case would be solved as well since I could create separate stories for each language. It would be a bit of a workaround though since not all my stories currently require a separate story for each language.

Other than that: Great addon! Thanks for the fabulous work!

After upgrading react-intl to 3.x, my storybook stopped working in IE 11. It seems to be the same bug as documented in this issue: formatjs/formatjs#1486

I solved the problem by removing storybook-addon-intl from the addons.js file and using IntlProvider instead, but I'm wondering if I can solve the problem differently and keep storybook-addon-intl.

My setup: latest Create-React-App with typescript, latest Storybook, latest react-intl

Looks like there is no way (or at least I couldn't find one) to provide a specific language for a specific story.
Let's say I was to display a story in English and then the same one in French. How would I do it?
Because when I'm adding my decorator it's for the entire Storybook, and I can't change it afterwards without affecting the entire application.
Thanks for your help.

Hey @floriangosse! I’m reaching out from the core SB team :)

Storybook 8 (our next major release) is coming soon, and it introduces some breaking changes that your addon might need to account for.

We’ve listed all the key changes in a new Storybook 8 migration guide, and we’d encourage you to check it out and see if your addon is impacted.

We also have an addons channel in our Discord community, which we’d like to use to better communicate with addon authors in the future. If you’re not part of the server, consider joining here and message me (@joevaugh4n) so that I can give you the addon creator role! If you’re already in the server, please just ping me and I’ll respond to you there.

Thanks for being a part of our addon community!

Joe

This seems to be a common problem with the new storybook version:
Uncaught Error: Accessing nonexistent addons channel

It would be usefull to add a getFormats(locale) function, exactly as getMessages, to pass formats to IntlProvider

Issue

Would be great to be able to access the defaultRichTextElements prop as it was previously available as of v2.4.1.

References

• https://formatjs.io/docs/react-intl/components/#intlprovider
• https://formatjs.io/docs/react-intl/components/#defaultrichtextelements

I'm not being able to visualize the [en] [de] buttons displayed on the README screenshot, even I follow the instructions, is anything extra I should do?

When resizing the storybook window and having multiple locales active (i.e 10) one has to use the horizontal scrollbar to see all the locale buttons in LocaleBar. It may be nice to use a media query OOB (default value could be (min-width: 0px) and (max-width: 575px)?) to apply something like flex-wrap: wrap; to LocaleBar, so that almost all the buttons would be visible without having to scroll.

Hi, in my components i use intlShape's functions by access intl prop, like this:

<div>
            <p>{intl.formatMessage({key: 'hi', defaultMessage: 'Hi'})}</p>
            <button>
                <FormattedMessage id="button.label" />
                
            </button>
        </div>

There is a way to access the formatMessage function of intlShape interface?

Thanks

Hey fellow maintainers 👋 !
I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. I'm opening up this issue and letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Looking forward to hearing from you and hopefully getting his addon updated as well for 7.0.

Hope everyone has a fantastic day.

Stay safe

I am seeing following warning after adding this plugin:

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <Styled(div)>. See https://fb.me/react-warning-keys for more information.
    in LocalePanel
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Seems that LocalePanel is part of this library?