@renec-foundation/lang-provider

Language Provider

This package provides a LocaleProvider and a useLocaleContext hook that allows you to easily handle language switching in your Next.js application.

Installation

npm install --save @renec-foundation/lang-provider

or

yarn add @renec-foundation/lang-provider

Example

import {
  LocaleProvider,
  useLocaleContext,
} from "@renec-foundation/lang-provider";

function MyApp({ Component, pageProps }) {
  return (
    <LocaleProvider geoApiUrl={".../api/geo"}>
      <MyLayout>
        <Component {...pageProps} />
      </MyLayout>
    </LocaleProvider>
  );
}

function MyComponent() {
  const { locale, handleLocaleChange } = useLocaleContext();

  return (
    <div>
      <p>Current locale: {locale}</p>
      <button onClick={() => handleLocaleChange("en")}>
        Switch to English
      </button>
      <button onClick={() => handleLocaleChange("fr")}>Switch to French</button>
    </div>
  );
}

Example

LocaleProvider

This is a component that should wrap your entire application. It sets up the LocaleContext and provides it to all child components.

Props

• children - ReactNode: The child components to render.
• geoApiUrl - string: The default geo api url (default is "/api/geo").

useLocaleContext

This is a hook that allows you to access the LocaleContext anywhere in your application.

Props

An object containing:

• locale - - string: The current locale.
• handleLocaleChange - - (newLocale: string) => void: A function to change the current locale.