A simple React hook to add multiple languages to your React app.
npm install use-zmanuse-zman is a simple React hook that allows you to add multiple languages to your React application. It provides a context for managing translations and makes it easy to switch between different languages.
bash
npm i use-zman
`
Usage
To use use-zman in your project, follow these steps:
1. Import the ZmanProvider and useZman hook into your component:
`tsx
import { ZmanProvider } from "use-zman";
`
2. Create a translations for ZmanProvider
`tsx
const translations = {
en: {
hello: "Hello World",
},
ku: {
hello: "سڵاو جیهان",
},
};
`
3. Wrap your application with the ZmanProvider component and pass the translations as a prop:
`tsx
const App = () => {
return (
// 👈
Hello World
// 👈
);
};
`
You can also pass default language as a prop to ZmanProvider:
`tsx
const App = () => {
return (
defaultLanguage="ku" // 👈
>
Hello World
);
};
`
4. Import useZman hook to your component:
`tsx
import { useZman } from "use-zman";
`
5. Use the useZman hook to access the translations:
`tsx
const { texts, setZman, currentZman } = useZman();
`
6. Use the texts object to access the translations:
`tsx
const { texts, setZman, currentZman } = useZman();
{texts.hello}
; // سڵاو جیهان
`
7. Use the setZman function to change the language:
`tsx
const { texts, setZman, currentZman } = useZman();
`
8. Use the currentZman to get the current language:
`tsx
const { texts, setZman, currentZman } = useZman();
{currentZman}
; // en
``