{"id":16800029,"url":"https://github.com/pmmmwh/react-polyglot-hooks","last_synced_at":"2025-03-17T03:31:09.499Z","repository":{"id":35080291,"uuid":"204526959","full_name":"pmmmwh/react-polyglot-hooks","owner":"pmmmwh","description":"Hooks for using Polyglot.js with React.","archived":false,"fork":false,"pushed_at":"2025-03-15T19:18:38.000Z","size":9749,"stargazers_count":26,"open_issues_count":9,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-16T07:41:34.518Z","etag":null,"topics":["i18n","polyglot","react","react-hooks","translation"],"latest_commit_sha":null,"homepage":"","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/pmmmwh.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":"2019-08-26T17:28:52.000Z","updated_at":"2025-03-02T11:28:26.000Z","dependencies_parsed_at":"2024-03-25T10:52:31.083Z","dependency_job_id":"b3bebc9f-2886-4f98-971a-2110325bfd25","html_url":"https://github.com/pmmmwh/react-polyglot-hooks","commit_stats":{"total_commits":1145,"total_committers":3,"mean_commits":381.6666666666667,"dds":"0.45240174672489086","last_synced_commit":"7981fe2214a2f28e19e6ecbfd9601683528632ab"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-polyglot-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-polyglot-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-polyglot-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-polyglot-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmmmwh","download_url":"https://codeload.github.com/pmmmwh/react-polyglot-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243968823,"owners_count":20376453,"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","polyglot","react","react-hooks","translation"],"created_at":"2024-10-13T09:30:33.941Z","updated_at":"2025-03-17T03:31:09.079Z","avatar_url":"https://github.com/pmmmwh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Polyglot Hooks\n\nHooks for using [Polyglot.js](https://airbnb.io/polyglot.js) with [React](https://reactjs.org/).\n\n[![npm Package](https://img.shields.io/npm/v/react-polyglot-hooks/latest.svg)](https://www.npmjs.com/package/react-polyglot-hooks)\n[![Minified Size](https://img.shields.io/bundlephobia/min/react-polyglot-hooks)](https://bundlephobia.com/result?p=react-polyglot-hooks@latest)\n[![Min-zipped Size](https://img.shields.io/bundlephobia/minzip/react-polyglot-hooks)](https://bundlephobia.com/result?p=react-polyglot-hooks@latest)\n\n[![CircleCI](https://img.shields.io/circleci/project/github/pmmmwh/react-polyglot-hooks/main.svg)](https://app.circleci.com/pipelines/github/pmmmwh/react-polyglot-hooks?branch=main)\n[![Coverage Status](https://img.shields.io/codecov/c/github/pmmmwh/react-polyglot-hooks/main.svg)](https://codecov.io/gh/pmmmwh/react-polyglot-hooks/branch/main)\n![Code Style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![Dependabot Status](https://api.dependabot.com/badges/status?host=github\u0026repo=pmmmwh/react-polyglot-hooks)](https://dependabot.com)\n[![Dependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/main/status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/main)\n[![PeerDependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/main/peer-status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/main?type=peer)\n[![DevDependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/main/dev-status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/main?type=dev)\n\n## Installation\n\nReact Polyglot Hooks is available as an [npm package](https://www.npmjs.com/package/react-polyglot-hooks).\n\n```sh\n// with npm\nnpm install react-polyglot-hooks\n\n// with yarn\nyarn add react-polyglot-hooks\n```\n\n\u003e React is required as a peer dependency.\n\u003e Please install version 16.8.3 or later (minimum requirement for hooks).\n\n## Usage\n\nReact Polyglot Hooks offers 1 wrapper component: `\u003cI18n\u003e`, 2 hooks: `useLocale` and `useT` and 1 helper component: `\u003cT\u003e`.\nThe hooks and the helper component have to be wrapped with the `\u003cI18n\u003e` component to work properly.\n\nHere is a quick example to get you started:\nFirst, wrap a parent component with `\u003cI18n\u003e` and provide `locale` and `phrases`.\n\n`Parent.jsx`\n\n```jsx\nimport React from 'react';\nimport { I18n } from 'react-polyglot-hooks';\nimport Child from './Child';\n\n// ... or any ways to determine current locale\nconst locale = window.locale || 'en';\n\n// You can put translations in separate files\nconst phrases = {\n  en: { hello: 'Hello, World!' },\n  fr: { hello: 'Bonjour, Monde!' },\n};\n\nexport default function Parent() {\n  return (\n    \u003cI18n locale={locale} phrases={phrases[locale]}\u003e\n      \u003cChild /\u003e\n    \u003c/I18n\u003e\n  );\n}\n```\n\nThen, in a child component, call the hooks:\n\n`Child.jsx`\n\n```jsx\nimport React from 'react';\nimport { T, useLocale } from 'react-polyglot-hooks';\n\nexport default function Child() {\n  const locale = useLocale(); // Current locale: \"en\"\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cspan\u003e{locale}\u003c/span\u003e\n      \u003cT phrase=\"hello\" /\u003e\n    \u003c/React.Fragment\u003e\n  );\n}\n```\n\nThat's it! For more in-depth examples, check out the [examples](/examples) directory.\n\n### Usage with TypeScript\n\nTypes are baked in as the project is written in [TypeScript](https://www.typescriptlang.org/).\n\n## API\n\n### `\u003cI18n\u003e`\n\nProvides i18n context to the T component and the hooks. Accepts all options supported by [Polyglot.js](https://airbnb.io/polyglot.js).\n\n#### Props\n\n| Prop            | Type                                                                         | Required | Description                                                                       |\n| --------------- | ---------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- |\n| `children`      | `Node`                                                                       | ✅       | Any node(s) accepted by React.                                                    |\n| `locale`        | `string`                                                                     | ✅       | Current locale, used for pluralization.                                           |\n| `phrases`       | `{ [key: string]: string }`                                                  | ✅       | Key-value pair of translated phrases, can be nested.                              |\n| `allowMissing`  | `boolean`                                                                    | ❌       | Controls whether missing phrase keys in a `t` call is allowed.                    |\n| `interpolation` | `{ prefix: string, suffix: string }`                                         | ❌       | Controls the prefix and suffix for an interpolation.                              |\n| `onMissingKey`  | `(key: string, options: InterpolationOptions, locale: string) =\u003e string`     | ❌       | A function called when `allowMissing` is `true` and a missing key is encountered. |\n| `pluralRules`   | `{ pluralTypes: PluralTypes, pluralTypeToLanguages: PluralTypeToLanguages }` | ❌       | Custom pluralization rules to be applied to change language(s) behaviour(s).      |\n\n### `\u003cT\u003e`\n\nRenders a phrase according to the props.\n\n#### Props\n\n| Props            | Type                   | Required | Description                                         |\n| ---------------- | ---------------------- | -------- | --------------------------------------------------- |\n| `phrase`         | `string`               | ✅       | Key of the needed phrase.                           |\n| `count`          | `number`               | ❌       | A number to be interpolated with `smart_count`.     |\n| `fallback`       | `string`               | ❌       | A fallback to be rendered if the phrase is missing. |\n| `interpolations` | `InterpolationOptions` | ❌       | See `InterpolationOptions` below.                   |\n\n### `useLocale`\n\nReturns the current active locale (`string`).\n\n### `useT`\n\nReturns a special function (`t`) which takes in parameters and returns a phrase.\n\n#### `t(phrase, InterpolationOptions)`\n\n| Param                  | Type                                       | Required | Description                                                                                                |\n| ---------------------- | ------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |\n| `phrase`               | `string`                                   | ✅       | Key of the needed phrase.                                                                                  |\n| `InterpolationOptions` | `number` or `{ [key: string]: ReactNode }` | ❌       | A number to be interpolated with `smart_count`, or a key-value pair to interpolate values into the phrase. |\n\nFor more details, please visit the [documentation](https://airbnb.io/polyglot.js) of Polyglot.js.\n\n## Changelog\n\nThe changelog is available [here](/CHANGELOG.md).\n\n## License\n\nThis project is licensed under the terms of the\n[MIT License](/LICENSE).\n\n## Acknowledgements\n\nThis project is developed to ease the use of [Polyglot.js](https://airbnb.io/polyglot.js) within [React](https://reactjs.org/), and is highly influenced by [`react-polyglot`](https://github.com/nayaabkhan/react-polyglot).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmmmwh%2Freact-polyglot-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmmmwh%2Freact-polyglot-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmmmwh%2Freact-polyglot-hooks/lists"}