Multilingual Greetings React Js Github < 95% ESSENTIAL >

import i18n from 'i18next'; import initReactI18next from 'react-i18next'; const resources = en: translation: greeting: "Hello, name! Welcome to the app.", select_lang: "Select Language"

const styles = container: textAlign: 'center', padding: '2rem', fontFamily: 'sans-serif' , select: padding: '0.5rem 1rem', fontSize: '1rem', marginBottom: '2rem', cursor: 'pointer' , card: backgroundColor: '#f5f5f5', borderRadius: '12px', padding: '2rem', maxWidth: '400px', margin: '0 auto', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' , input: padding: '0.5rem', fontSize: '1rem', marginTop: '1rem', width: '80%', borderRadius: '8px', border: '1px solid #ccc'

, es: translation: greeting: "¡Hola, name! Bienvenido a la aplicación.", select_lang: "Seleccionar idioma"

const changeLanguage = (lng) => i18n.changeLanguage(lng); ; multilingual greetings react js github

<div style=styles.card> <h3>t('greeting', name )</h3> <input type="text" placeholder="Enter your name" value=name onChange=(e) => setName(e.target.value) style=styles.input /> </div> </div> ); ;

## Deploying to GitHub Pages / Netlify

;

i18n .use(initReactI18next) .init( resources, lng: "en", // default language fallbackLng: "en", interpolation: escapeValue: false // React already safes from XSS

Tags: React i18n JavaScript WebDev Open Source

, ja: translation: greeting: "こんにちは、nameさん！アプリへようこそ。", select_lang: "言語を選択" import i18n from 'i18next'

export default Greeting; import React from 'react'; import './App.css'; import Greeting from './components/Greeting'; import './i18n'; // initialize i18n function App() return ( <div className="App"> <header className="App-header"> <Greeting /> </header> </div> );

);