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

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

Il pacchetto react-intlayer consente 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 contesti 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: Utilizza TypeScript per garantire che tutte le definizioni dei tuoi contenuti siano precise e prive di errori.
• File di contenuti 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 i tuoi contenuti in modo strutturato ovunque nel tuo codice.

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

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

Dichiarare i tuoi contenuti

react-intlayer è progettato per funzionare con il pacchetto intlayer. intlayer è un pacchetto che consente di dichiarare i tuoi contenuti 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 contenuti:

import { t, type Dictionary } from "intlayer";// Dichiarazione dei contenuti per il componente 1const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    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;

Utilizzare i contenuti nel tuo codice

Una volta dichiarati i tuoi contenuti, puoi utilizzarli nel tuo codice. Ecco un esempio di come utilizzare i contenuti 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"); // Creare dichiarazione contenuti correlata  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Padroneggiare l'internazionalizzazione della tua applicazione React

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

Per saperne di più su queste funzionalità, consulta la guida Internazionalizzazione (i18n) di React con Intlayer e Vite e React per applicazioni Vite e React, o la guida Internazionalizzazione (i18n) di React 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()
• useIntlayerAsync()