{"id":19374061,"url":"https://github.com/eolme/i18nano","last_synced_at":"2025-10-04T04:51:30.859Z","repository":{"id":53457398,"uuid":"473330012","full_name":"eolme/i18nano","owner":"eolme","description":"Lightweight translation module with functionality similar to react-i18next","archived":false,"fork":false,"pushed_at":"2024-12-20T15:42:19.000Z","size":85,"stargazers_count":37,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T18:11:12.487Z","etag":null,"topics":["i18n","i18next","internationalization","l10n","localization","react","reactjs","translation"],"latest_commit_sha":null,"homepage":"https://npm.im/i18nano","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/eolme.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-03-23T19:27:34.000Z","updated_at":"2024-12-20T15:41:01.000Z","dependencies_parsed_at":"2024-11-10T08:34:15.581Z","dependency_job_id":"4f637fb2-4e20-4633-adc3-5778fd4ebf90","html_url":"https://github.com/eolme/i18nano","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"d3f3d7fc3ac9fe857944c39f8414f1ffb13afd35"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eolme%2Fi18nano","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eolme%2Fi18nano/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eolme%2Fi18nano/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eolme%2Fi18nano/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eolme","download_url":"https://codeload.github.com/eolme/i18nano/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250490310,"owners_count":21439119,"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":["i18n","i18next","internationalization","l10n","localization","react","reactjs","translation"],"created_at":"2024-11-10T08:34:00.215Z","updated_at":"2025-10-04T04:51:25.820Z","avatar_url":"https://github.com/eolme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# i18nano [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/eolme/i18nano/blob/master/LICENSE) [![gzip bundle size](https://phobia.vercel.app/api/badge/gz/i18nano)](https://phobia.vercel.app/p/i18nano) [![brotli bundle size](https://phobia.vercel.app/api/badge/br/i18nano)](https://phobia.vercel.app/p/i18nano) [![Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)](https://github.com/eolme/i18nano/blob/master/tests)\n\n\u003e Internationalization for the react is done simply.\n\nLightweight translation module with functionality similar to react-i18next.\n\n## Features\n\n- Async translation loading \n- Fallback translations\n- Preloading translations\n- Translations in translations\n- Deep translations and values lookup\n- [Mustache](https://mustache.github.io/)-like templates\n- Nested providers\n- No dependencies\n- And other cool stuff\n\n## Usage\n\nLet's create typical, unopinionated and simple component with the following structure:\n\n```tsx\nimport { TranslationProvider, Translation } from 'i18nano';\nimport { load } from './load';\n\nconst translations = {\n  // dynamic import static json\n  'en': () =\u003e import('translations/en.json'),\n  // or with custom load function\n  'ru': () =\u003e load('ru')\n};\n\nexport const App = () =\u003e {\n  return (\n    \u003cTranslationProvider translations={translations}\u003e\n      \u003cheader\u003e\n        \u003cTranslation path=\"header\"\u003e\n          Loading...\n        \u003c/Translation\u003e\n      \u003c/header\u003e\n    \u003c/TranslationProvider\u003e\n  );\n};\n```\n\nAnd that's all it takes! For other available provider options see [definition](./src/types.ts#L25-L35).\n\n### Components\n\n- `Translation` - recommended way to use i18nano\n- `TranslationRender` - low level rendering component\n\n### Hooks\n\n- `useTranslation` - returns the function to extract the translation\n- `useTranslationChange` - returns the object with information and useful functions such as `switch` and `preload` languages\n\n### Switch\n\nTo switch between languages, let's create a component using the hook as follows:\n\n```tsx\nimport { useTranslationChange } from 'i18nano';\n\nexport const LanguageChange = () =\u003e {\n  const translation = useTranslationChange();\n\n  return (\n    \u003cselect value={translation.lang} onChange={(event) =\u003e {\n      translation.change(event.target.value);\n    }}\u003e\n      {translation.all.map((lang) =\u003e (\n        \u003coption key={lang} value={lang}\u003e\n          {lang}\n        \u003c/option\u003e\n      ))}\n    \u003c/select\u003e\n  );\n};\n```\n\n## Concurrent features\n\nIf you use react 18 it is recommended to use `transition`.\nThen when you switch languages, the last downloaded translation will be displayed instead of the loader.\n\n## Split\n\nYou can use several TranslationProviders to split up translation files, for example:\n\n```tsx\nimport { TranslationProvider, Translation } from 'i18nano';\n\nconst translations = {\n  common: {\n    'en': async () =\u003e ({\n      license: 'MIT'\n    })\n  },\n  header: {\n    'en': async () =\u003e ({\n      title: 'Header'\n    })\n  },\n  main: {\n    'en': async () =\u003e ({\n      title: 'Main'\n    })\n  }\n};\n\nexport const Header = () =\u003e {\n  return (\n    \u003cTranslationProvider\n      language=\"en\"\n      translations={translations.header}\n    \u003e\n      \u003cheader\u003e\n        \u003cTranslation path=\"title\" /\u003e\n      \u003c/header\u003e\n      \u003cTranslation path=\"license\" /\u003e\n    \u003c/TranslationProvider\u003e\n  );\n};\n\nexport const Main = () =\u003e {\n  return (\n    \u003cTranslationProvider\n      language=\"en\"\n      translations={translations.main}\n    \u003e\n      \u003ch1\u003e\n        \u003cTranslation path=\"title\" /\u003e\n      \u003c/h1\u003e\n      \u003cTranslation path=\"license\" /\u003e\n    \u003c/TranslationProvider\u003e\n  );\n};\n\n/**\n * MIT\n * \u003cheader\u003eHeader\u003c/header\u003e\n * MIT\n * \u003cmain\u003eMain\u003c/main\u003e\n * MIT\n */\nexport const App = () =\u003e {\n  return (\n    \u003cTranslationProvider\n      language=\"en\"\n      translations={translations.common}\n    \u003e\n      \u003cTranslation path=\"license\" /\u003e\n      \u003cHeader /\u003e\n      \u003cMain /\u003e\n    \u003c/TranslationProvider\u003e\n  );\n};\n```\n\n## Installation\n\nRecommend to use [yarn](https://yarnpkg.com/getting-started/install) for dependency management:\n\n```shell\nyarn add i18nano\n```\n\n## License\n\ni18nano is [MIT licensed](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feolme%2Fi18nano","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feolme%2Fi18nano","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feolme%2Fi18nano/lists"}