easy-translation

React - Easy Translation

Installation

 

Setup Setup is simple and easy. Create a directory in public (or someplace accessable on the internet). Example: "locale", this is where the translation files will be. Create a file for each language that you want to support.   Name files based on language. Example : en.json, fr.json... etc See next section on how to add the Provider to your code. The provider will fetch the translation file needed based on the browser language.
React: Can used directly in your entry point. import { LanguageProvider } from "easy-translation";   function MainPage() {    return(      <LanguageProvider languagePath="<http path to language directiory>">          <YourComponents/>      </LanguageProvider>    ); } export default MainPage;
Nextjs: Needs a client component entry point: function MainPage() { return(   <Lang>      <YourComponents/>   </Lang> ); } export default MainPage;   client component: "use client"; import { ReactNode } from "react"; import { LanguageProvider } from "easy-translation"; function Lang({ children }: { children: ReactNode }) {    return (      <LanguageProvider languagePath="<http path to language directiory>">            {children}      </LanguageProvider>    ); } export default Lang;