storybook-react-i18next

/* .storybook/main.ts */ import type { StorybookConfig } from '@storybook/core-common'; const config: StorybookConfig = { stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-react-i18next' // Add this line ], framework: { name: '@storybook/react-vite', options: {}, }, docs: { autodocs: 'tag', }, }; export default config; /* .storybook/i18next.ts */ import { initReactI18next } from 'react-i18next'; import i18n from 'i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; const ns = ['common']; // Define your namespaces const supportedLngs = ['en', 'fr', 'ja']; const resources = ns.reduce((acc, n) => { supportedLngs.forEach((lng) => { if (!acc[lng]) acc[lng] = {}; acc[lng] = { ...acc[lng], [n]: { /* Your translation keys for namespace 'n' and language 'lng' */ 'hello': 'Hello from {{name}}', 'welcome': 'Welcome to our app' } }; }); return acc; }, {}); i18n.use(initReactI18next) .use(LanguageDetector) .use(Backend) // Optional if you provide resources directly .init({ debug: false, lng: 'en', fallbackLng: 'en', defaultNS: 'common', ns, interpolation: { escapeValue: false }, react: { useSuspense: false }, supportedLngs, resources, }); export default i18n; /* .storybook/preview.ts */ import type { Preview } from '@storybook/react'; import i18n from './i18next'; // Import your i18n configuration const preview: Preview = { initialGlobals: { locale: 'en', locales: { en: 'English', fr: 'Français', ja: '日本語', }, }, parameters: { i18n, // Pass your i18n instance here }, }; export default preview;