react-intlayer: Pacchetto NPM per internazionalizzare (i18n) un'applicazione React

Intlayer è una suite di pacchetti progettata specificamente per sviluppatori JavaScript. È compatibile con framework come React, React e Express.js.

Il pacchetto react-intlayer ti permette di internazionalizzare la tua applicazione React. Fornisce provider di contesto e hook per l'internazionalizzazione in React.

Perché internazionalizzare la tua applicazione React?

Internazionalizzare la tua applicazione React è essenziale per servire efficacemente un pubblico globale. Permette alla tua applicazione di fornire contenuti e messaggi nella lingua preferita di ogni utente. Questa capacità migliora l'esperienza utente e amplia la portata della tua applicazione rendendola più accessibile e rilevante per persone di diversi background linguistici.

Perché integrare Intlayer?

• Gestione dei contenuti basata su JavaScript: Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente.
• Ambiente Type-Safe: Sfrutta TypeScript per garantire che tutte le tue definizioni di contenuto siano precise e prive di errori.
• File di Contenuto Integrati: Mantieni le tue traduzioni vicine ai rispettivi componenti, migliorando la manutenibilità e la chiarezza.

Installazione

Installa il pacchetto necessario utilizzando il tuo gestore di pacchetti preferito:

npm install react-intlayer

Esempio di utilizzo

Con Intlayer, puoi dichiarare il tuo contenuto in modo strutturato ovunque nel tuo codice.

Per impostazione predefinita, Intlayer esegue la scansione dei file con estensione .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Puoi modificare l'estensione predefinita impostando la proprietà contentDir nel file di configurazione.

.├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

Dichiara il tuo contenuto

react-intlayer è progettato per funzionare con il pacchetto intlayer. intlayer è un pacchetto che ti permette di dichiarare il tuo contenuto ovunque nel tuo codice. Converte le dichiarazioni di contenuti multilingue in dizionari strutturati che si integrano perfettamente nella tua applicazione.

Ecco un esempio di dichiarazione di contenuto:

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Meno di meno una macchina",      "-1": "Meno una macchina",      "0": "Nessuna macchina",      "1": "Una macchina",      ">5": "Alcune macchine",      ">19": "Molte macchine",    }),  },} satisfies Dictionary;export default component1Content;

Utilizza il contenuto nel tuo codice

Una volta dichiarato il contenuto, puoi utilizzarlo nel tuo codice. Ecco un esempio di come usare il contenuto in un componente React:

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Crea la dichiarazione del contenuto correlato  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Padroneggiare l'internazionalizzazione della tua applicazione React

Intlayer offre molte funzionalità per aiutarti a internazionalizzare la tua applicazione React.

Per saperne di più su queste funzionalità, consulta la guida Internazionalizzazione React (i18n) con Intlayer, Vite e React per applicazioni Vite e React, oppure la guida Internazionalizzazione React (i18n) con Intlayer e React (CRA) per React Create App.

Funzioni fornite dal pacchetto react-intlayer

Il pacchetto react-intlayer fornisce anche alcune funzioni per aiutarti a internazionalizzare la tua applicazione.

• t()
• useIntlayer()
• useDictionary()
• useLocale()

Cronologia della documentazione

• 5.5.10 - 2025-06-29: Cronologia iniziale