{"library":"storybook-react-i18next","title":"Storybook React i18next Addon","type":"library","description":"storybook-react-i18next is a Storybook addon that provides seamless integration for react-i18next, enabling developers to test and showcase their localized React components directly within Storybook stories. The current stable version is 10.1.2, which supports Storybook v10, i18next v26, and react-i18next v17. The project maintains an active release cadence, frequently updating to support the latest major versions of its core peer dependencies (Storybook, i18next, and react-i18next). Its primary differentiator is simplifying the process of switching locales within the Storybook UI, allowing designers and developers to easily verify internationalization implementations without complex manual setup per story. It requires pre-existing i18next and react-i18next configurations in the consuming project.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install storybook-react-i18next"],"cli":null},"imports":["export default {\n  addons: ['storybook-react-i18next']\n};","import i18n from './i18next';","import { initReactI18next } from 'react-i18next';","import i18next from 'i18next';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/stevensacks/storybook-react-i18next","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-react-i18next","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"/* .storybook/main.ts */\nimport type { StorybookConfig } from '@storybook/core-common';\n\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],\n  addons: [\n    '@storybook/addon-links',\n    '@storybook/addon-essentials',\n    'storybook-react-i18next' // Add this line\n  ],\n  framework: {\n    name: '@storybook/react-vite',\n    options: {},\n  },\n  docs: {\n    autodocs: 'tag',\n  },\n};\n\nexport default config;\n\n\n/* .storybook/i18next.ts */\nimport { initReactI18next } from 'react-i18next';\nimport i18n from 'i18next';\nimport Backend from 'i18next-http-backend';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\nconst ns = ['common']; // Define your namespaces\nconst supportedLngs = ['en', 'fr', 'ja'];\nconst resources = ns.reduce((acc, n) => {\n  supportedLngs.forEach((lng) => {\n    if (!acc[lng]) acc[lng] = {};\n    acc[lng] = {\n      ...acc[lng],\n      [n]: { /* Your translation keys for namespace 'n' and language 'lng' */\n        'hello': 'Hello from {{name}}',\n        'welcome': 'Welcome to our app'\n      }\n    };\n  });\n  return acc;\n}, {});\n\ni18n.use(initReactI18next)\n  .use(LanguageDetector)\n  .use(Backend) // Optional if you provide resources directly\n  .init({\n    debug: false,\n    lng: 'en',\n    fallbackLng: 'en',\n    defaultNS: 'common',\n    ns,\n    interpolation: { escapeValue: false },\n    react: { useSuspense: false },\n    supportedLngs,\n    resources,\n  });\n\nexport default i18n;\n\n\n/* .storybook/preview.ts */\nimport type { Preview } from '@storybook/react';\nimport i18n from './i18next'; // Import your i18n configuration\n\nconst preview: Preview = {\n  initialGlobals: {\n    locale: 'en',\n    locales: {\n      en: 'English',\n      fr: 'Français',\n      ja: '日本語',\n    },\n  },\n  parameters: {\n    i18n, // Pass your i18n instance here\n  },\n};\n\nexport default preview;\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `storybook-react-i18next` into your Storybook project, including configuring your `main.ts` for addon registration, setting up a basic `i18next.ts` instance with sample resources, and configuring `preview.ts` to enable locale switching in the Storybook toolbar.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}