{"id":21822067,"url":"https://github.com/stevensacks/storybook-react-i18next","last_synced_at":"2025-04-05T02:06:52.654Z","repository":{"id":43044492,"uuid":"385163987","full_name":"stevensacks/storybook-react-i18next","owner":"stevensacks","description":"Storybook i18next addon","archived":false,"fork":false,"pushed_at":"2025-01-20T06:37:21.000Z","size":3501,"stargazers_count":23,"open_issues_count":0,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T01:05:53.121Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stevensacks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-12T07:38:09.000Z","updated_at":"2025-03-04T13:20:21.000Z","dependencies_parsed_at":"2024-05-14T03:31:13.469Z","dependency_job_id":"0e3e580e-d06b-4bc5-9df6-c213c377b445","html_url":"https://github.com/stevensacks/storybook-react-i18next","commit_stats":{"total_commits":93,"total_committers":14,"mean_commits":6.642857142857143,"dds":"0.25806451612903225","last_synced_commit":"26490d65da5536e24896af7b51c5247ce73af6bd"},"previous_names":["stevensacks/storybook-i18next"],"tags_count":43,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-react-i18next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-react-i18next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-react-i18next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-react-i18next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevensacks","download_url":"https://codeload.github.com/stevensacks/storybook-react-i18next/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276163,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-27T17:12:52.312Z","updated_at":"2025-04-05T02:06:52.628Z","avatar_url":"https://github.com/stevensacks.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Storybook react-i18next addon\n\nEasy react-i18next Storybook integration.\n\nRequired Peer Dependencies:\n* storybook - `^8.2.0`\n* i18next - `^22.0.0 || ^23.0.0 || ^24.0.0`\n* i18next-browser-languagedetector - `^7.0.0 || ^8.0.0`\n* i18next-http-backend: `^2.0.0 || ^3.0.0`\n* react-i18next - `^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0`\n\nThis Storybook addon assumes your project is already set up with [i18next](https://www.i18next.com/overview/getting-started) and [react-i18next](https://react.i18next.com/getting-started), with all the required packages installed, and that it is properly configured and working.\n\n## Installation\n\nInstall this addon as a devDependency.\n\n```bash\nnpm i -D storybook-react-i18next\n```\n\nYou will need to install `i18next` and `react-i18next` as dependencies to your project if they are not already installed.\n```bash\nnpm i -S i18next react-i18next i18next-browser-languagedetector i18next-http-backend\n```\n\n## Usage\n\nAfter installing, follow these 3 steps to enable this addon in Storybook.\n\n### main.ts\nInsert this addon into your addons array:\n```typescript\n{\n  addons: [\n    // other addons...\n    'storybook-react-i18next',\n  ]\n}\n```\n---\n\n### i18next.ts\nCreate a file in your `.storybook` folder called `i18next.ts` (or whatever you like). \n\nIn this file, copy and paste the below code and make whatever modifications you need (paths to resource files, languages, etc.).\n```typescript\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'];\nconst supportedLngs = ['en', 'fr', 'ja'];\nconst resources = ns.reduce((acc, n) =\u003e {\n    supportedLngs.forEach((lng) =\u003e {\n    if (!acc[lng]) acc[lng] = {};\n        acc[lng] = {\n            ...acc[lng],\n            [n]: require(`../public/locales/${lng}/${n}.json`),\n        };\n    });\n    return acc;\n}, {});\n\ni18n.use(initReactI18next)\n    .use(LanguageDetector)\n    .use(Backend)\n    .init({\n        //debug: true,\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\nRefer to the [i18next Configuration Options](https://www.i18next.com/overview/configuration-options) documentation for detailed information about the configuration options.\n\n---\n\n### preview.ts\nIn your `preview.ts`, you need to add the `locales` and `locale` to` initialGlobals` (or `globals` if you're not using the latest version of storybook), as well as adding `i18n` that you exported from the above file to parameters.\n\n`locales` is an object where the keys are the \"ids\" of the locales/languages and the values are the names you want to display in the dropdown.\n\n`locale` is what you want the default locale to be.\n\n```typescript\nimport i18n from './i18next';\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,\n    },\n};\n\nexport default preview;\n```\n\nYou can also use full locale strings as keys. It depends on your i18next configuration.\n\n```typescript\nimport i18n from './i18next';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: 'en_US',\n        locales: {\n            en_US: 'English (US)',\n            en_GB: 'English (GB)',\n            fr_FR: 'Français',\n            ja_JP: '日本語',\n        },\n    },\n    parameters: {\n        i18n,\n    },\n};\n\nexport default preview;\n```\n\n\nThe `locales` object can also have values as an object with keys of `title`, `left`, or `right`.\n\nThis is useful if you want to include an emoji flag or some other string to the left or right side.\n\nFor example:\n```typescript\nimport i18n from './i18next';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: \"en\",\n        locales: {\n            en: {icon: '🇺🇸', title: 'English', right: 'EN'},\n            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},\n            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},\n        },\n    },\n    parameters: {\n        i18n,\n    },\n};\n\nexport default preview;\n```\n\nOr something like this:\n```typescript\nimport i18n from './i18next';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: 'en_US',\n        locales: {\n            en_US: {title: 'English', right: 'US'},\n            en_GB: {title: 'English', right: 'GB'},\n            fr_FR: {title: 'Français', right: 'FR'},\n            ja_JP: {title: '日本語', right: 'JP'},\n        },\n    },\n    parameters: {\n        i18n,\n    },\n};\n\nexport default preview;\n```\n\n## Story Parameters Locale\n\nIf you want to have a story use a specific locale, set it in that Story's parameters.\n\n```typescript jsx\nexport const Default: StoryObj = {\n    render: () =\u003e \u003cYourComponent/\u003e,\n};\n\nexport const Japanese: StoryObj = {\n    parameters: {\n        locale: 'ja',\n    },\n    render: () =\u003e \u003cYourComponent/\u003e,\n};\n```\nNote that doing this switches the current locale to the parameter one, so when you change to a story without a parameter, it will stay at the last selected locale.\n\nIn the above example, if you view the Japanese story and then click back on the Default story, the locale will stay `ja`.\n\n---\nOnce you have finished these steps and launch storybook, you should see a globe icon in the toolbar.\n\nClicking this globe icon will show a dropdown with the locales you defined in `parameters`. \n\nSwitching locales will use the strings defined in your locale json files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Fstorybook-react-i18next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevensacks%2Fstorybook-react-i18next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Fstorybook-react-i18next/lists"}