useTranslator
React hooks for the @corets/translator package.
yarn
npm
yarn add @corets/use-translator
npm install --save @corets/use-translator
This is a React integration for this package:
You can share a translator instance through a dedicated
TranslatorProvider component. Methods like useTranslator, useTranslate and useLanguage automatically try to find an instance in the context, so you don't have to pass it manually. This is the recommended way to use this library:import React from "react"
import { render } from "react-dom"
import { createTranslator } from "@corets/translator"
import {
TranslatorProvider,
useTranslator,
useTranslate,
useLanguage,
} from "@corets/use-translator"
const translations = {
en: {
title: "Foo",
nested: { title: "Bar" }
}
}
const translator = createTranslator(translations, { language: "en" })
const Example = () => {
const t = useTranslate()
return <div>Regular access: {t("title")}</div>
}
render(
<TranslatorProvider instance={translator}>
<Example />
</TranslatorProvider>,
document.getElementById("root")
)
Translations can be accessed statically thanks to the
createTranslatorAccessor helper. All you have to do is to create a small hook where you choose your default / most up to date language that is used for the static typing.import React from "react"
import { render } from "react-dom"
import { createTranslatorAccessor } from "@corets/translator"
const translations = {
en: {
title: "Foo",
nested: { title: "Bar" }
}
}
const translator = createTranslator(translations, { language: "en" })
const useLocales = () => createTanslatorAccessor(useTranslator(translator), translations.en)
const Example () => {
const loc = useLocales()
return <div>{loc.nested.title.get()}</div>
}
render(<Example />, document.getElementById("root"))
Use translator inside React components:
import React from "react"
import { render } from "react-dom"
import { createTranslator } from "@corets/translator"
import { useTranslator } from "@corets/use-translator"
const translations = {
en: {
title: "Foo",
nested: { title: "Bar" }
}
}
const translator = createTranslator(translations, { language: "en" })
const Example = () => {
const translator = useTranslator(translator)
return (
<div>Title: {translator.get("title")}</div>
)
}
render(<Example />, document.getElementById("root"))
Use a translation function inside React components:
import React from "react"
import { render } from "react-dom"
import { createTranslator } from "@corets/translator"
import { useTranslate } from "@corets/use-translator"
const translations = {
en: {
title: "Foo",
nested: { title: "Bar" }
}
}
const translator = createTranslator(translations, { language: "en" })
const Exymple = () => {
const t = useTranslate(translator)
const tt = useTranslate(translator, { "nested" })
return (
<div>
<div>Title: {t("title")}</div>
<div>Nested title: {tt("title")}, same as: {t("nested.title")}</div>
</div>
)
}
render(<Example />, document.getElementById("root"))
Use language related information inside your React components:
import React from "react"
import { render } from "react-dom"
import { createTranslator } from "@corets/translator"
import { useLanguage } from "@corets/use-translator"
const translations = {
en: {
title: "Foo",
nested: { title: "Bar" }
}
}
const translator = createTranslator(translations, { language: "en" })
const Example = () => {
const language = useLanguage(translator)
return (
<div>
<div>Current: {language.current}</div>
<div>Fallback: {language.fallback}</div>
<div>Available: {JSON.stringify(language.available)}</div>
<button onClick={()=> language.set("de")}>Set language to "de"</button>
</div>
)
}
render(<Example />, document.getElementById("root"))
Last modified 1yr ago