{"id":44759260,"url":"https://github.com/devakone/react-i18next-helpers","last_synced_at":"2026-02-16T01:53:23.412Z","repository":{"id":34931601,"uuid":"191636118","full_name":"devakone/react-i18next-helpers","owner":"devakone","description":"A set of helper hooks and components to use with i18next, react-i18next and Formik","archived":false,"fork":false,"pushed_at":"2023-01-04T00:02:07.000Z","size":399,"stargazers_count":3,"open_issues_count":9,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-12T05:22:56.003Z","etag":null,"topics":["formik","i18next","react-i18next"],"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/devakone.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":"2019-06-12T19:58:24.000Z","updated_at":"2023-03-08T23:43:39.000Z","dependencies_parsed_at":"2023-01-15T10:36:40.158Z","dependency_job_id":null,"html_url":"https://github.com/devakone/react-i18next-helpers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devakone/react-i18next-helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devakone%2Freact-i18next-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devakone%2Freact-i18next-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devakone%2Freact-i18next-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devakone%2Freact-i18next-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devakone","download_url":"https://codeload.github.com/devakone/react-i18next-helpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devakone%2Freact-i18next-helpers/sbom","scorecard":{"id":336737,"data":{"date":"2025-08-11","repo":{"name":"github.com/devakone/react-i18next-helpers","commit":"60e5cbe0aafba3fbe2e2961b0eb5aaf84ca9784e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"38 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-545q-3fg6-48m7","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T04:54:41.898Z","repository_id":34931601,"created_at":"2025-08-18T04:54:41.899Z","updated_at":"2025-08-18T04:54:41.899Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29498347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T01:48:08.113Z","status":"ssl_error","status_checked_at":"2026-02-16T01:48:06.108Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["formik","i18next","react-i18next"],"created_at":"2026-02-16T01:53:19.737Z","updated_at":"2026-02-16T01:53:23.406Z","avatar_url":"https://github.com/devakone.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-i18next-helpers\nA set of helper hooks and components to use with i18next, react-i18next and Formik; i18next makes translating a breeze in apps, and using the react-i18next opens up the API for most React Applications. However, there are blind spots like with any other libraries. These helpers are here to help you cover these blind spots.\n\n## Using Formik and translating errors\nIf you use Formik and you have errors rendered on the screen, you will notice that if you change the current language, your errors remain in the language they were before the translation. This library gives you a hook you can use to make sure that when the i18n language changes, your form errors are also translated.\n\n### Render Example \n\nThis example is based on using the `render` method for rendering a Formik form\n\n```\n\n...\n\u003cFormik component={ContactForm} /\u003e;\n...\n\nimport useTranslateFormErrors from '../../hooks/use-translate-form-errors';\n\nconst ContactForm = ({\n  handleSubmit,\n  handleChange,\n  handleBlur,\n  values,\n  errors,\n  touched,\n  setFieldTouched\n}) =\u003e {\n  \n useTranslateFormErrors(errors, touched, setFieldTouched);\n\nreturn (\n  \u003cform onSubmit={handleSubmit}\u003e\n    \u003cinput\n      type=\"text\"\n      onChange={handleChange}\n      onBlur={handleBlur}\n      value={values.name}\n      name=\"name\"\n    /\u003e\n    {errors.name \u0026\u0026 \u003cdiv\u003e{errors.name}\u003c/div\u003e}\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n);\n\n}\n\n```\n\nJust passing the `errors`, `touched`, and `setFieldTouched` FormikProps to the hook in your render method ensures that your errors will get translated if the language changes.\n\n### HOC Example \n\n```\n\u003cFormik\n  render={({ handleSubmit, handleChange, handleBlur, setFieldTouched, values, errors, touched }) =\u003e (\n    \u003cWithTranslateFormErrors errors={errors} touched={touched} setFieldTouched={setFieldTouched}\u003e\n      \u003cform onSubmit={handleSubmit}\u003e\n        \u003cinput\n          type=\"text\"\n          onChange={handleChange}\n          onBlur={handleBlur}\n          value={values.name}\n          name=\"name\"\n        /\u003e\n        {errors.name \u0026\u0026\n          \u003cdiv\u003e\n            {errors.name}\n          \u003c/div\u003e}\n        \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/WithTranslateFormErrors\u003e\n  )}\n/\u003e\n\nimport PropTypes from 'prop-types';\nimport React, { useEffect }  from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst useTranslateFormErrors = (errors, touched, setFieldTouched) =\u003e {\n  const { i18n } = useTranslation();\n  useEffect(() =\u003e {\n    i18n.on('languageChanged', lng =\u003e {\n      Object.keys(errors).forEach(fieldName =\u003e {\n        if (Object.keys(touched).includes(fieldName)) {\n          setFieldTouched(fieldName);\n        }\n      });\n    });\n    return () =\u003e {\n      i18n.off('languageChanged', lng =\u003e {});\n    };\n  }, [errors]);\n};\n\n\nconst WithTranslateFormErrors = ({ errors, touched, setFieldTouched,  children }) =\u003e {\n  useTranslateFormErrors(errors, touched, setFieldTouched);\n  return \u003c\u003e{children}\u003c/\u003e;\n};\n\nWithTranslateFormErrors.propTypes = {\n  form: PropTypes.object\n};\n\nexport default WithTranslateFormErrors;\n\n\n```\n\n\n\nJust passing the `errors`, `touched`, and `setFieldTouched` FormikProps to the HOC in your render method ensures that your errors will get translated if the language changes.\n\n## Translating raw or dynamic HTML\n\nIf you're ever in need of translating HTML you're adding dynamically to your app, and to keep content in that HTML translated, you can use the `useTranslateHtmlElement` hook.\n\n```\n\nimport dompurify from 'dompurify';\nimport useTranslateHtmlElement from './use-translate-html-element';\n// Our safe HTML rendering component\n// From https://dev.to/jam3/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464\n\nfunction SafeHTMLComponent() {\n  // title is dynamic HTML\n  const title = response.from.backend.title;\n  // sanitizer will sanitize the HTML\n  const sanitizer = dompurify.sanitize;\n  const safeTitle = sanitizer(title);\n  const [ref] = useTranslateHtmlElement(safeTitle);\n  return\n  \n  import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst translateI18nTokensInHtmlElement = (i18n, htmlElement) =\u003e {\n  const i18nTokenNodes = htmlElement.querySelectorAll('[data-i18n]');\n  for (let i = 0; i \u003c i18nTokenNodes.length; i++) {\n    i18nTokenNodes[i].innerHTML = i18n.t(i18nTokenNodes[i].getAttribute('data-i18n'));\n  }\n};\n\nconst useTranslateHtmlElement = html =\u003e {\n  const { i18n } = useTranslation();\n  const [node, setRef] = useState(null);\n  const translateIfNodeRendered = node =\u003e {\n    if (node) {\n      translateI18nTokensInHtmlElement(i18n, node);\n    }\n  };\n  useEffect(() =\u003e {\n    translateIfNodeRendered(node);\n\n    i18n.on('languageChanged', lng =\u003e {\n      translateIfNodeRendered(node);\n    });\n    return () =\u003e {\n      i18n.off('languageChanged', lng =\u003e {});\n    };\n  }, [html]);\n  return [setRef];\n};\n\nexport default useTranslateHtmlElement;\n\n```\n\n\n\n\nThe example is self explanatory. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevakone%2Freact-i18next-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevakone%2Freact-i18next-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevakone%2Freact-i18next-helpers/lists"}