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'}</>
}