A tiny hook to manage translations in your React Application
- Support for deeply nested objects. Eg:
translate('profile.top.heading') - 100% Test coverage
- Fully controlled and stateless
yarn add tinytranslate OR npm i tinytranslate --save
- Define your translations
const translations = { en: { locale: "en-US", messages: { hello: "Hello {name}", }, }, };
- Add TranslationProvider to your app
import { TranslationProvider } from "tinytranslate"; const App = () => { return ( <TranslationProvider translations={translations} locale="en"> <Header /> </TranslationProvider> ); };
- Use useTranslation hook
import { useTranslation } from 'tinytranslate' const Header = () => { const translate = useTranslation() return <>{translate('hello'}</> }