Integrazione React: Documentazione Hook useLocale

Questa sezione fornisce dettagli completi sull'hook useLocale della libreria react-intlayer, progettato per gestire la gestione delle localizzazioni nelle applicazioni React.

Importare useLocale in React

Per integrare l'hook useLocale nella tua applicazione React, importalo dal rispettivo pacchetto:

import { useLocale } from "react-intlayer"; // Usato nei componenti React per la gestione della localizzazione

Panoramica

L'hook useLocale offre un modo semplice per accedere e manipolare le impostazioni della localizzazione all'interno dei componenti React. Fornisce accesso alla localizzazione corrente, alla localizzazione predefinita, a tutte le localizzazioni disponibili e alle funzioni per aggiornare le impostazioni della localizzazione.

Utilizzo

Ecco come puoi usare l'hook useLocale all'interno di un componente React:

import type { FC } from "react";
import { useLocale } from "react-intlayer";

const LocaleSwitcher: FC = () => {
  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();

  return (
    <div>
      <h1>Localizzazione corrente: {locale}</h1>
      <p>Localizzazione predefinita: {defaultLocale}</p>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        {availableLocales.map((loc) => (
          <option key={loc} value={loc}>
            {loc}
          </option>
        ))}
      </select>
    </div>
  );
};

export default LocaleSwitcher;

Parametri e Valori di Ritorno

Quando si invoca l'hook useLocale, restituisce un oggetto contenente le seguenti proprietà:

• locale: La localizzazione corrente impostata nel contesto React.
• defaultLocale: La localizzazione primaria definita nella configurazione.
• availableLocales: Una lista di tutte le localizzazioni disponibili come definite nella configurazione.
• setLocale: Una funzione per aggiornare la localizzazione corrente all'interno del contesto dell'applicazione.

Esempio

Questo esempio mostra un componente che utilizza l'hook useLocale per rendere un selettore di localizzazione, permettendo agli utenti di cambiare dinamicamente la localizzazione dell'applicazione:

import type { FC } from "react";
import { useLocale } from "react-intlayer";

const LocaleSelector: FC = () => {
  const { locale, setLocale, availableLocales } = useLocale();

  const handleLocaleChange = (newLocale) => {
    setLocale(newLocale);
  };

  return (
    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
      {availableLocales.map((locale) => (
        <option key={locale} value={locale}>
          {locale}
        </option>
      ))}
    </select>
  );
};

Conclusione

Il hook useLocale di react-intlayer è uno strumento essenziale per gestire le localizzazioni nelle tue applicazioni React, fornendo le funzionalità necessarie per adattare efficacemente la tua applicazione a diversi pubblici internazionali.