text: (window.webpackJsonp=window.webpackJsonp||[]).push([[32],{nyHz:function(n,t,e){"use strict";e.r(t),e.d(t,"_frontmatter",(function(){return l})),e.d(t,"default",(function(){return u}));var a=e("Fcif"),r=e("+I+c"),o=(e("mXGw"),e("/FXl")),s=e("TjRS"),l=(e("aD51"),{});void 0!==l&&l&&l===Object(l)&&Object.isExtensible(l)&&!l.hasOwnProperty("__filemeta")&&Object.defineProperty(l,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/pages/use-translator.mdx"}});var c={_frontmatter:l},i=s.a;function u(n){var t=n.components,e=Object(r.a)(n,["components"]);return Object(o.b)(i,Object(a.a)({},c,e,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h1",{id:"use-translator"},"Use Translator"),Object(o.b)("p",null,"React integration for the ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/translator"}),"@corets/translator")," package."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"yarn add @corets/use-translator\n")),Object(o.b)("h2",{id:"usetranslator"},Object(o.b)("inlineCode",{parentName:"h2"},"useTranslator")),Object(o.b)("p",null,"Use translator inside components and re-render on language and translation changes:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-tsx"}),'import React from "react"\nimport { createTranslator } from "@corets/translator"\nimport { useTranslator } from "@corets/use-translator"\n\nconst translations = {\n  en: {\n    title: "Foo",\n    nested: { title: "Bar" }\n  }\n}\nconst translator = createTranslator(translations, { language: "en" })\n\nconst Example = () => {\n  const translator = useTranslator(translator)\n\n  return (\n    <div>Title: {translator.get("title")}</div>\n  )\n}\n')),Object(o.b)("h2",{id:"usetranslate"},Object(o.b)("inlineCode",{parentName:"h2"},"useTranslate")),Object(o.b)("p",null,"Use a translation function inside components and re-render on language and translation changes:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-tsx"}),'import React from "react"\nimport { createTranslator } from "@corets/translator"\nimport { useTranslate } from "@corets/use-translator"\n\nconst translations = {\n  en: {\n    title: "Foo",\n    nested: { title: "Bar" }\n  }\n}\nconst translator = createTranslator(translations, { language: "en" })\n\nconst Exymple = () => {\n  const t = useTranslate(translator)\n  const tt = useTranslate(translator, { "nested" })\n\n  return (\n    <div>\n      <div>Title: {t("title")}</div>\n      <div>Nested title: {tt("title")}, same as: {t("nested.title")}</div>\n    </div>\n  )\n}\n')),Object(o.b)("h2",{id:"uselanguage"},Object(o.b)("inlineCode",{parentName:"h2"},"useLanguage")),Object(o.b)("p",null,"Use languages related information inside your React component:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-tsx"}),'import React from "react"\nimport { createTranslator } from "@corets/translator"\nimport { useLanguage } from "@corets/use-translator"\n\nconst translations = {\n  en: {\n    title: "Foo",\n    nested: { title: "Bar" }\n  }\n}\nconst translator = createTranslator(translations, { language: "en" })\n\nconst Example = () => {\n  const language = useLanguage(translator)\n\n  return (\n    <div>\n      <div>Current: {language.current}</div>\n      <div>Fallback: {language.fallback}</div>\n      <div>Available: {JSON.stringify(language.available)}</div>\n      <button onClick={()=> language.set("de")}>Set language to "de"</button>\n    </div>\n  )\n}\n')),Object(o.b)("h2",{id:"translatorcontext"},Object(o.b)("inlineCode",{parentName:"h2"},"TranslatorContext")),Object(o.b)("p",null,"You can share a translator instance through a dedicated ",Object(o.b)("inlineCode",{parentName:"p"},"TranslatorContext"),". Methods like ",Object(o.b)("inlineCode",{parentName:"p"},"useTranslator"),", ",Object(o.b)("inlineCode",{parentName:"p"},"useTranslate")," and ",Object(o.b)("inlineCode",{parentName:"p"},"useLanguage")," automatically try to find an instance in the context, so you don't have to extract it manually:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-tsx"}),'import React ,{useContext}from "react"\nimport { createTranslator } from "@corets/translator"\nimport {\n  TranslatorContext,\n  useTranslator,\n  useTranslate,\n  useLanguage,\n} from "@corets/use-translator"\n\nconst translations = {\n  en: {\n    title: "Foo",\n    nested: { title: "Bar" }\n  }\n}\nconst translator = createTranslator(translations, { language: "en" })\n\nconst ExampleProvider = () => {\n  return (\n    <TranslatorContext.Provider value={translator}>\n      <Example />\n    </TranslatorContext.Provider>\n  )\n}\n\nconst Example = () => {\n  const translatorFromContext = useContext(TranslatorContext)\n  const alsoTranslatorFromContext = useTranslator()\n\n  const translateFunctionFromContext = useTranslate(translatorFromContext)\n  const alsoTranslateFunctionFromContext = useTranslate()\n\n  const languageFromContext = useLanguage(translatorFromContext)\n  const alsoLanguageFromContext = useLanguage()\n\n  const changeLanguage = () => languageFromContext.set("de")\n\n  return (\n    <div>\n      <h1>Title: {translateFunctionFromContext("title")}</h1>\n      <button onClick={changeLanguage}>Change language to "de"</button>\n    </div>\n  )\n}\n')))}void 0!==u&&u&&u===Object(u)&&Object.isExtensible(u)&&!u.hasOwnProperty("__filemeta")&&Object.defineProperty(u,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/pages/use-translator.mdx"}}),u.isMDXComponent=!0}}]);
  //# sourceMappingURL=component---src-pages-use-translator-mdx-2838a0e9f5cccbae4c26.js.map