{"id":20665420,"url":"https://github.com/rohit1901/intl-react","last_synced_at":"2026-05-07T05:35:46.112Z","repository":{"id":249891706,"uuid":"832872200","full_name":"rohit1901/intl-react","owner":"rohit1901","description":"Internationalize React apps. This library provides React components and an API to format numbers, strings, including pluralization and handling translations. #showcase","archived":false,"fork":false,"pushed_at":"2025-07-02T10:38:36.000Z","size":152,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T11:41:07.947Z","etag":null,"topics":["internationalization","javascript","library","locale","react","reactnative","typescript","vite"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/intl-react","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/rohit1901.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-07-23T22:36:42.000Z","updated_at":"2025-07-02T10:38:41.000Z","dependencies_parsed_at":"2024-07-24T01:52:28.955Z","dependency_job_id":"d5114bd4-a7a4-4058-9dd9-fb7c87dec9a0","html_url":"https://github.com/rohit1901/intl-react","commit_stats":null,"previous_names":["rohit1901/intl-react"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/rohit1901/intl-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohit1901%2Fintl-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohit1901%2Fintl-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohit1901%2Fintl-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohit1901%2Fintl-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohit1901","download_url":"https://codeload.github.com/rohit1901/intl-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohit1901%2Fintl-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269677513,"owners_count":24457858,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"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":["internationalization","javascript","library","locale","react","reactnative","typescript","vite"],"created_at":"2024-11-16T19:30:57.723Z","updated_at":"2026-05-07T05:35:41.064Z","avatar_url":"https://github.com/rohit1901.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# intl-react\n\n**intl-react** is a lightweight, powerful i18n provider for React applications. It offers full TypeScript support, autocompletion, zero dependencies, and an intuitive API. Perfect for both web and React Native projects.\n\n## Features\n\n- 🌐 Automatic browser language detection\n- 📅 Dates support\n- 🔢 Smart plural rules for any language\n- 🔄 Dynamic translations with multiple keys\n- 🗂️ Deep nested key access in JSON translation files\n- ⚧️ Gender-aware syntax adaptation\n- 📱 React Native compatibility\n- 💡 TypeScript autocompletion for translation keys\n- 🚀 Performant and lightweight\n\n## Installation\n\n```bash\n# Using npm\nnpm install intl-react\n\n# Using yarn\nyarn add intl-react\n\n# Using pnpm\npnpm add intl-react\n```\n\n## Quick Start\n\n1. Create your JSON translation files\n2. Set up the IntlReact provider\n3. Use translations in your components\n\n### 1. Create Translation Files\n\nExample `en.json`:\n\n```json\n{\n  \"greeting\": \"Hello, __name__!\",\n  \"items\": {\n    \"zero\": \"No items\",\n    \"one\": \"One item\",\n    \"many\": \"__count__ items\"\n  },\n  \"weather\": {\n    \"hot\": \"It's __temperature__°C outside. Stay hydrated!\",\n    \"cold\": \"It's __temperature__°C outside. Bundle up!\"\n  },\n  \"profile\": {\n    \"title\": {\n      \"male\": \"Mr. __name__\",\n      \"female\": \"Ms. __name__\"\n    }\n  }\n}\n```\n\n### 2. Set Up Provider\n\n```jsx\nimport React from 'react';\nimport { IntlReact } from 'intl-react';\nimport en from './locales/en.json';\nimport es from './locales/es.json';\n\nfunction App() {\n  return (\n    \u003cIntlReact \n      languages={{ en, es }} \n      defaultLanguage=\"en\"\n      detectBrowserLanguage={true}\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/IntlReact\u003e\n  );\n}\n\nexport default App;\n```\n\n### 3. Use Translations\n\n```jsx\nimport React from 'react';\nimport { useTranslation } from 'intl-react';\n\nfunction Welcome() {\n  const { T, setLocale, locale } = useTranslation();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{T('greeting', { name: 'Alice' })}\u003c/h1\u003e\n      \u003cp\u003e{T('items', { count: 5 })}\u003c/p\u003e\n      \u003cp\u003e{T('weather.hot', { temperature: 30 })}\u003c/p\u003e\n      \u003cp\u003e{T('profile.title', { name: 'Johnson', gender: 'male' })}\u003c/p\u003e\n      \n      \u003cp\u003eCurrent language: {locale}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setLocale('es')}\u003eSwitch to Spanish\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Advanced Usage\n\n### Dynamic Values\n\nUse double underscores to denote dynamic values in your translations:\n\n```json\n{\n  \"welcome\": \"Welcome to __city__, __name__!\"\n}\n```\n\n```jsx\nT('welcome', { city: 'Paris', name: 'Alice' })\n```\n\n### Pluralization\n\nUse `zero`, `one`, and `many` keys for pluralization:\n\n```json\n{\n  \"apples\": {\n    \"zero\": \"No apples\",\n    \"one\": \"One apple\",\n    \"many\": \"__count__ apples\"\n  }\n}\n```\n\n```jsx\nT('apples', { count: 0 })  // \"No apples\"\nT('apples', { count: 1 })  // \"One apple\"\nT('apples', { count: 5 })  // \"5 apples\"\n```\n\n### Gender-Aware Translations\n\nUse `male` and `female` keys for gender-specific translations:\n\n```json\n{\n  \"greeting\": {\n    \"male\": \"Welcome, Mr. __name__\",\n    \"female\": \"Welcome, Ms. __name__\"\n  }\n}\n```\n\n```jsx\nT('greeting', { name: 'Smith', gender: 'male' })\nT('greeting', { name: 'Johnson', gender: 'female' })\n```\n\n### Locale Management\n\n```jsx\nconst { setLocale, locale } = useTranslation();\n\n// Get current locale\nconsole.log(locale);\n\n// Change locale\nsetLocale('fr');\n```\n\n## React Native Support\n\nintl-react works seamlessly with React Native. Just wrap your app with the provider:\n\n```jsx\nimport { IntlReact } from 'intl-react';\nimport en from './locales/en.json';\nimport fr from './locales/fr.json';\n\nexport default function App() {\n  return (\n    \u003cIntlReact languages={{ en, fr }} defaultLanguage=\"en\"\u003e\n      \u003cNavigationContainer\u003e{/* ... */}\u003c/NavigationContainer\u003e\n    \u003c/IntlReact\u003e\n  );\n}\n```\n\nThen use it in your components:\n\n```jsx\nimport { useTranslation } from 'intl-react';\nimport { Text, Button } from 'react-native';\n\nfunction MyScreen() {\n  const { T, setLocale } = useTranslation();\n\n  return (\n    \u003c\u003e\n      \u003cText\u003e{T('greeting', { name: 'User' })}\u003c/Text\u003e\n      \u003cButton title=\"Switch to French\" onPress={() =\u003e setLocale('fr')} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## TypeScript and Autocompletion\n\nFor TypeScript projects, create a custom hook for autocompletion:\n\n```typescript\n// translate.ts\nimport { useTranslation as useIntlT, Autocomplete, TParams, tr } from 'intl-react';\nimport en from './locales/en.json';\n\ntype Key = Autocomplete\u003ctypeof en\u003e;\n\nexport const useTranslation = () =\u003e {\n  const { locale, languages, defaultLanguage } = useIntlT();\n  return {\n    T: (key: Key, params?: TParams) =\u003e\n      tr({ locale, languages, defaultLanguage }, key, params),\n    setLocale: useIntlT().setLocale,\n    locale: useIntlT().locale,\n  };\n};\n```\n\nNow use your custom hook for autocompletion:\n\n```tsx\nimport { useTranslation } from './translate';\n\nfunction MyComponent() {\n  const { T } = useTranslation();\n  return \u003ch1\u003e{T('greeting', { name: 'World' })}\u003c/h1\u003e;\n}\n```\n\n## API Reference\n\n### IntlReact Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `languages` | `object` | Object containing all translation JSON files |\n| `defaultLanguage` | `string` | Default language code |\n| `detectBrowserLanguage` | `boolean` | Automatically detect and use browser language |\n\n### useTranslation Hook\n\n| Method/Property | Type | Description |\n|-----------------|------|-------------|\n| `T` | `function` | Translation function |\n| `setLocale` | `function` | Change current locale |\n| `locale` | `string` | Current locale code |\n\n## Best Practices\n\n1. Keep translation keys hierarchical and meaningful\n2. Use pluralization for countable items\n3. Implement gender-aware translations where applicable\n4. Leverage TypeScript for type-safe translations\n5. Regularly update and sync translation files across languages\n\n## License\n\nintl-react is MIT licensed. See [LICENSE](LICENSE.md) for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohit1901%2Fintl-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohit1901%2Fintl-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohit1901%2Fintl-react/lists"}