{"id":21124515,"url":"https://github.com/zauberware/react-i18n","last_synced_at":"2025-03-14T11:25:38.043Z","repository":{"id":42837962,"uuid":"263303513","full_name":"zauberware/react-i18n","owner":"zauberware","description":"I18n helper for React and React Native projects.","archived":false,"fork":false,"pushed_at":"2023-03-04T18:22:00.000Z","size":279,"stargazers_count":3,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T05:26:59.602Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zauberware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-05-12T10:20:25.000Z","updated_at":"2022-01-26T18:03:32.000Z","dependencies_parsed_at":"2025-01-21T05:24:29.481Z","dependency_job_id":"cf56214e-c01c-4fad-92a2-6fae15c6f59e","html_url":"https://github.com/zauberware/react-i18n","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zauberware","download_url":"https://codeload.github.com/zauberware/react-i18n/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243567295,"owners_count":20312016,"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":"2024-11-20T04:16:48.818Z","updated_at":"2025-03-14T11:25:38.012Z","avatar_url":"https://github.com/zauberware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Requirements\n\nInstall Lokalise (https://github.com/lokalise/lokalise-cli-2-go)\n\n## Install\n\n```\nnpm i @zauberware/react-i18n --save\nyarn add @zauberware/react-i18n\n```\n\n## Create Project\n\nCreate Project at https://lokalise.com.\nCopy token and project id to your .env file. Go to personal profile to grap token and to project settings to grap project id.\n\n## .env\n\nConfigure and put these env variables to your .env file.\n\nCommon\n\n```\nREACT_APP_LOKALISE_TOKEN=token\nREACT_APP_LOKALISE_PROJECT_ID=projectid\nREACT_APP_BRANCHES=false\nREACT_APP_LOCALES=[\"de\", \"en\", \"fr\"]\nREACT_APP_DEFAULT_LOCALE=de\nREACT_APP_ENV=development\nREACT_APP_S3_BUCKET=zwt.locales.test/lokalise\nREACT_APP_SRC_INPUT=./src/**/*.js\n```\n\nReact\n\n```\nREACT_APP_LOCALES_BUILD_PATH=public/locales\nREACT_APP_LOCALES_PUSH_PATH=./.locales\nREACT_APP_ENV=development\n```\n\nReact-Native\n\n```\nREACT_APP_LOCALES_BUILD_PATH=www/locales\nREACT_APP_LOCALES_PUSH_PATH=.locales\n```\n\n## package.json scripts\n\nPut these scripts into your root package.json\n\n```\n\"locales-push\": \"npm explore @zauberware/react-i18n -- npm run locales-push --env=$PWD\",\n\"locales-parse\": \"npm explore @zauberware/react-i18n -- npm run locales-parse --env=$PWD\",\n\"locales-push-files\": \"npm explore @zauberware/react-i18n -- npm run locales-push-files --env=$PWD\",\n\"locales-pull-files\": \"npm explore @zauberware/react-i18n -- npm run locales-pull-files --env=$PWD\"\n```\n\n### Develop your app!\n\n### React\n\n```\nimport React, { Suspense } from \"react\";\n\n\u003cSuspense fallback=\"Loading\"\u003e\n    \u003cApp /\u003e\n\u003c/Suspense\u003e\n```\n\n```\nimport i18n, { useTranslation } from \"@zauberware/react-i18n/web\";\nconst { t } = useTranslation(\"app\", { useSuspense: true });\n\n{t('key')}\n{t('key', {maxLength: 150})}\n\n{t('key', {defaultValue: 'XYZ'})} // helps coding a lot!\n```\n\n### React Native\n\n```\nimport i18n, { useTranslation } from \"@zauberware/react-i18n/mobile\";\n```\n\n## Flows\n\n### Create locales\n\nBased on the env variable \"REACT_APP_LOCALES\", it will create the locales you want to use for your project. You can re-run this command if you want to add locales.\n\n```\nnpm run locales-push\n```\n\n### Use branches [optional]\n\nGo to project settings. Check \"branching\", save.\nCreate branches you need e.g. development, staging, production.\nSet env variable \"REACT_APP_BRANCHES\" to true to tell React to download env specific translations.\nSet \"REACT_APP_ENV\" to the env you are currently using.\n\nAll package.json commands need to add `--branch=staging` to tell Lokalise which env we are talking to.\n\n### Parse translation keys\n\nWill create parsed files to upload/compare with Lokalise.\nYou can configure where the parser should create the files with \"REACT_APP_LOCALES_PUSH_PATH\".\nThese files be used to push/cleanup keys.\nThe format of these JSON files is structured. Parser will collect keys, validation limits etc.\n\n```\nnpm run locales-parse\n```\n\n### Push translation keys\n\nPush translations keys/files from \"REACT_APP_LOCALES_PUSH_PATH\".\n\n```\nnpm run locales-push-files\n```\n\nGo to your lokalise project and check whether the upload was successful.\n\n### Pull translation keys\n\nPull keys to directory. Please use **public/locales** for React web projects!\nYou have to pull locales, otherwise fallback files won't work!\nThese files will be put into the build as fallback JSON files.\nThe format of these JSON files is flat (key: value).\n\n```\nnpm run locales-pull-files\n```\n\n### S3 Bucket sync\n\nEnable S3 Integration in your lokalise project.\n\nSpecify which bucket should be used declared with \"REACT_APP_S3_BUCKET\". Bucket needs to be public!\n\nYou can trigger s3 sync by clicking \"Download\" and selecting \"Amazon S3\" as export.\n\nPlease use project_id/%LANG_ISO% as file structure.\nPlease use project_id/env/%LANG_ISO% when using branches.\nPlease use format \"JSON (.json)\"!\nClick \"build only\" to trigger s3.\n\nYou can ask support to enable s3 sync on other events like \"translations updated\".\n\n### Translator Role\n\nCreate Translator User + Translator Role, which limitted permissions. Can only edit locales. Cannot create locales or create keys. Invite client to start translating.\n\n### Cleanup keys\n\nGenerate keys `npm run locales-parse`.\n\n`npm run locales-push-files --cleanup=true` will remove all remote keys which do not exist anymore\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzauberware%2Freact-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-i18n/lists"}