use-zman

Package Information

use-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.

Installation

You can install this package using npm or yarn:

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:

import { ZmanProvider } from "use-zman";

2. Create a translations for ZmanProvider

const translations = {
  en: {
    hello: "Hello World",
  },
  ku: {
    hello: "سڵاو جیهان",
  },
};

3. Wrap your application with the ZmanProvider component and pass the translations as a prop:

const App = () => {
  return (
    <ZmanProvider translations={translations}>
      // 👈
      <div>
        <h1>Hello World</h1>
      </div>
    </ZmanProvider> // 👈
  );
};

You can also pass default language as a prop to ZmanProvider:

const App = () => {
  return (
    <ZmanProvider
      translations={translations}
      defaultLanguage="ku" // 👈
    >
      <div>
        <h1>Hello World</h1>
      </div>
    </ZmanProvider>
  );
};

4. Import useZman hook to your component:

import { useZman } from "use-zman";

5. Use the useZman hook to access the translations:

const { texts, setZman, currentZman } = useZman();

6. Use the texts object to access the translations:

const { texts, setZman, currentZman } = useZman();

<p>{texts.hello}</p>; // سڵاو جیهان

7. Use the setZman function to change the language:

const { texts, setZman, currentZman } = useZman();

<button onClick={() => setZman("en")}>English</button>
<button onClick={() => setZman("ku")}>Kurdish</button>

8. Use the currentZman to get the current language:

const { texts, setZman, currentZman } = useZman();

<p>{currentZman}</p>; // en