{"id":26608862,"url":"https://github.com/nicklayb/react-easy-i18n","last_synced_at":"2025-04-09T22:53:54.307Z","repository":{"id":22202053,"uuid":"95600549","full_name":"nicklayb/react-easy-i18n","owner":"nicklayb","description":"Easy and simple i18n and formatters implementation for React","archived":false,"fork":false,"pushed_at":"2023-01-25T18:17:07.000Z","size":3283,"stargazers_count":5,"open_issues_count":17,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T22:53:47.095Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/nicklayb.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}},"created_at":"2017-06-27T21:01:39.000Z","updated_at":"2023-07-23T17:51:26.000Z","dependencies_parsed_at":"2023-02-14T10:17:15.702Z","dependency_job_id":null,"html_url":"https://github.com/nicklayb/react-easy-i18n","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Freact-easy-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Freact-easy-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Freact-easy-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Freact-easy-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicklayb","download_url":"https://codeload.github.com/nicklayb/react-easy-i18n/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125632,"owners_count":21051766,"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":"2025-03-24T00:43:12.087Z","updated_at":"2025-04-09T22:53:54.272Z","avatar_url":"https://github.com/nicklayb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-easy-i18n\n\n## Installation\n\n```js\nnpm install --save react-easy-i18n\n```\n\n### Usage\n\n#### Creating new language bundle\n\nYou can create a language bundle by using the `registerLang` function from the package. You first pass in the language abbreviation, then you pass the translation object :\n```js\nimport { registerLang } from 'react-easy-i18n';\n\nregisterLang('en', {\n    home: 'Home',\n    user: 'User'\n});\n```\n\n##### Nesting language bundles\n\nYou can nest language bundle into sub object for easier listing.\n```js\nimport { registerLang } from 'react-easy-i18n';\n\nregisterLang('en', {\n    home: 'Home',\n    user: {\n        firstname: 'Firstname',\n        config: {\n            language: 'Language'\n        }\n    }\n});\n```\n\nAnd then pass in a slug splitted by dot to your `\u003cText/\u003e` component like :\n\n```js\n\u003cText text=\"user.config.language\"/\u003e //  Would output \"Language\"\n```\n\n#### Switching locales\n\nYou can switch locale with the `setCurrentLocale` function. **Make sure you already registered the language or it'll fallback to english**\n\n```js\nimport { registerLang, setCurrentLocale } from 'react-easy-i18n';\n\nregisterLang('en', {\n    home: 'Home',\n    user: 'User'\n});\n\nsetCurrentLocale('en');\n```\n\n#### Usage in React\n\nA component `Text` is included with the package which handles formatting and translations. You must at least provide the `text` prop which is the key of your translation.\n\n```js\nimport React from 'react';\nimport { Text } from 'react-easy-i18n';\n\nconst SuperReactCompoenent = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cText text=\"welcome\" /\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\nThe `Text` component will render your translation of \"welcome\" inside spans.\n\nYou can also provide 2 other props : `params` and `formatters`\n\n### Advanced usage\n\n#### Parameters\n\nYou may require to parameterize string instead of concatenate them. You can do so by providing your parameter key with a colon (`:`) inside you string. For instance, I want to say Hi to my users.\n\n```js\nimport React from 'react';\nimport { registerLang, Text } from 'react-easy-i18n';\n\nregisterLang('en', {\n    welcome: 'Hi :fullname'\n});\n\nconst SuperReactCompoenent = () =\u003e {\n    const fullname = 'John Doe';\n    const params = {\n        fullname\n    };\n    return (\n        \u003cdiv\u003e\n            \u003cText text=\"welcome\" params={params}/\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\nThe rendered text will be `Hi John Doe`.\n\n#### Formatters\n\nYou may want to format text sometimes. It helps you keep your translation base clean and reusable because you will be formatting it on runtime.\n\nFirst, you must register your formatter with the `registerFormatters` helper. It simply takes and object in parameter with the function you use as formatters\n\n```js\nimport { registerFormatters } from 'react-easy-i18n';\n\nregisterFormatters({\n    uppercase: text =\u003e text.toUpperCase(),\n    exclamation: text =\u003e text + '!',\n});\n```\n\nAnd then you pass a string with all the formatters you want splitted by pipes\n\n```js\nimport React from 'react';\nimport { Text, registerFormatters } from 'react-easy-i18n';\n\nregisterLang('en', {\n    welcome: 'Hi :fullname'\n});\n\nregisterFormatters({\n    uppercase: text =\u003e text.toUpperCase(),\n    exclamation: text =\u003e text + '!',\n});\n\nconst SuperReactCompoenent = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cText text=\"welcome\" formatters=\"uppercase|exclamation\"/\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n##### With parameters\n\nIt would render `HI JOHN DOE!`. It may end up with the need to parameterize these formatters. Stay safe, we did it for you. You can, after you formatter key, add a colon (`:`) and pass in parameters splitted by commas\n\nI want a formatter to surround a text with things. Sometimes it'll be parentheses, sometimes brackets.\n\n```js\nimport React from 'react';\nimport { registerFormatters, registerLang, Text } from 'react-easy-i18n';\n\nregisterLang('en', {\n    home: 'Home'\n});\n\nregisterFormatters({\n\n    // args is the array of things after the colon\n    surround: (text, args) =\u003e args[0] + text + args[1]\n});\n\nconst SuperReactCompoenent = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cText text=\"welcome\" formatters=\"surround:(,)\"/\u003e\n            \u003cText text=\"welcome\" formatters=\"surround:[,]\"/\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\nThe first component will render `(Home)` and the second will render `[Home]`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Freact-easy-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicklayb%2Freact-easy-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Freact-easy-i18n/lists"}