{"id":19905165,"url":"https://github.com/ossphilippines/r22n","last_synced_at":"2026-06-09T04:06:53.425Z","repository":{"id":173929594,"uuid":"651468457","full_name":"OSSPhilippines/r22n","owner":"OSSPhilippines","description":"ReactInternationalization (r22n)","archived":false,"fork":false,"pushed_at":"2025-04-20T09:23:39.000Z","size":77,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T13:56:56.235Z","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/OSSPhilippines.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,"zenodo":null}},"created_at":"2023-06-09T09:54:01.000Z","updated_at":"2025-04-20T09:23:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"dd15259f-9d35-4786-b38b-aa6278ecc5d5","html_url":"https://github.com/OSSPhilippines/r22n","commit_stats":null,"previous_names":["cblanquera/r22n","ossphilippines/r22n"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/OSSPhilippines/r22n","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fr22n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fr22n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fr22n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fr22n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OSSPhilippines","download_url":"https://codeload.github.com/OSSPhilippines/r22n/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fr22n/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34090830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-12T20:31:50.509Z","updated_at":"2026-06-09T04:06:53.409Z","avatar_url":"https://github.com/OSSPhilippines.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactInternationalization (r22n)\n\nA zero-configuration language translation interface for react written \nin typescript.\n\n## Why?\n\nAnother alternative solution is `react-i18next`.\n\nBut, I needed a very light weight expressive translator that I can \nplugin any session handler and handles the ordering of phrases and \nvariables better. \n\n## Install\n\n```bash\n$ npm install r22n\n```\n\n## Usage\n\nOpen `App.tsx` and add the `R22nProvider` component around the main \n`Component`.\n\n```jsx\nimport { R22nProvider } from 'r22n';\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003cR22nProvider\u003e\n      \u003cComponent {...pageProps} session={pageProps.session} /\u003e\n    \u003c/R22nProvider\u003e\n  );\n};\n```\n\nAlso add a default `language` and `translations` like the following. \nInclude `language` and `translations` in the `R22nProvider` props.\n\n```jsx\nimport type { AppProps } from 'next/app';\nimport { R22nProvider } from 'r22n';\n\nconst language = 'klingon';\nconst translations = {\n  \"Hello World\": \"qo' vIvan\",\n  \"%s User\": \"tera'ngan %s\",\n  \"Welcome %s\": \"yI'el %s\",\n  \"You are %s years old\": \"%s ben ghu'\"\n};\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003cR22nProvider language={language} translations={translations}\u003e\n      \u003cComponent {...pageProps} session={pageProps.session} /\u003e\n    \u003c/R22nProvider\u003e\n  );\n};\n```\n\nNext in `index.tsx` import the `useLanguage` hook and the `Translate` \ncomponent. You can now translate phrases in the following ways.\n\n```jsx\nimport { useLanguage, Translate } from 'r22n';\n\nconst Page = () =\u003e {\n  const { _, t } = useLanguage();  \n  const name = 'Chris';\n  const role = 'Admin';\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eInline Tranlation\u003c/h2\u003e\n      \u003cp\u003e{_('Hello World')}\u003c/p\u003e\n\n      \u003ch2\u003eInline Tranlation with Variables\u003c/h2\u003e\n      \u003cp\u003e{_('%s User', role)}\u003c/p\u003e\n      \n      \u003ch2\u003eString Literal Translations\u003c/h2\u003e\n      \u003cp\u003e{t`Welcome ${name}`}\u003c/p\u003e\n      \n      \u003ch2\u003eTranslate Component\u003c/h2\u003e\n      \u003cTranslate\u003eYou are \u003cstrong\u003e22\u003c/strong\u003e years old\u003c/Translate\u003e\n      \n      \u003ch2\u003eTranslate Component with Variables\u003c/h2\u003e\n      \u003cTranslate values={[ 22 ]}\u003eYou are %s years old\u003c/Translate\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\nNext, let's add a language switcher. First create a list of \nlanguages and translations like the following.\n\n```jsx\nconst languages: Record\u003cstring, Record\u003cstring, string\u003e\u003e = {\n  klingon: {\n    \"Hello World\": \"qo' vIvan\",\n    \"%s User\": \"tera'ngan %s\",\n    \"Welcome %s\": \"yI'el %s\",\n    \"You are %s years old\": \"%s ben ghu'\"\n  },\n  english: {\n    \"Hello World\": \"Hello World\",\n    \"%s User\": \"%s User\",\n    \"Welcome %s\": \"Welcome %s\",\n    \"You are %s years old\": \"You are %s years old\"\n  }\n};\n```\n\nCreate a handler for `changeLanguage` and add listeners in the rendered \ncomponent section like below.\n\n```jsx\nconst Page = () =\u003e {\n  const { _, t, language, changeLanguage } = useLanguage();  \n  const name = 'Chris';\n  const change = (language: string) =\u003e {\n    changeLanguage(language, languages[language]);\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e change('english')}\u003e\n        Change to English\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e change('klingon')}\u003e\n        Change to Klingon\n      \u003c/button\u003e\n      \n      \u003ch2\u003eInline Tranlation\u003c/h2\u003e\n      \u003cp\u003e{_('Hello World')}\u003c/p\u003e\n      \n      \u003ch2\u003eInline Tranlation with Variables\u003c/h2\u003e\n      \u003cp\u003e{_('%s User', role)}\u003c/p\u003e\n      \n      \u003ch2\u003eString Literal Translations\u003c/h2\u003e\n      \u003cp\u003e{t`Welcome ${name}`}\u003c/p\u003e\n      \n      \u003ch2\u003eTranslate Component\u003c/h2\u003e\n      \u003cTranslate\u003eYou are \u003cstrong\u003e22\u003c/strong\u003e years old\u003c/Translate\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Contributing\n\nThanks for being an awesome developer! We are always looking for \ncontributors and sponsors. If your interested, \n[contact us](https://github.com/OSSPhilippines) so we can discuss. \nClone this repo and run the following commands in the project folder.\n\n```js\n$ yarn\n$ yarn build\n```\n\nPlease follow the steps below to properly contribute to this repository.\n\n\u003e Do not commit code that is not related to a GitHub issue!\n\n\u003e Please tag all your commits with `[type]/[issue#]`.\n\n\u003e Please include the time it took per commit. ie. `1s` or `1h`.\n\n 1. Per issue on Github, you should create a branch. example: `[type]/[issue#]`\n    - Per feature you should create a feature branch. ie. `feature/1001`.\n    - Per bug you should create a fix branch. ie. `fix/1002`.\n    - Per task you should create a task branch. ie. `task/1003`\n 2. Commits need to reference the issue that is being worked on. example: `updated copy #1004` or `fixes #1005`\n    - It's also good to to add the amount of time to your commit message. example: `fixed button #1006 30m` or `built awsome feature #1007 16h`\n 3. When you are finished with your branch, you should create a pull request back to the `main` branch.\n    - Assign another developer to review your code. \n    - All contributors are expected to both write and review code. \n    - Ask [Dev lead](https://github.com/cblanquera) for assignments.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fossphilippines%2Fr22n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fossphilippines%2Fr22n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fossphilippines%2Fr22n/lists"}