react-use-zman v1.0.0

��# use-zman

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, useZman } from "use-zman";

2. Create a translations for ZmanProvider

const translations = {
  en: {
    hello: "Hello World",
  },
  ku: {
    hello: "3�'H ,�G'F",
  },
};

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

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

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

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

4. Use the useZman hook to access the translations:

const { texts, setZman } = useZman();

5. Use the texts object to access the translations:

const { texts, setZman } = useZman();

<p>{texts.hello}</p>; // 3�'H ,�G'F

6. Use the setZman function to change the language:

const { texts, setZman } = useZman();

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