React-translate-provider NPM

React Translate Provider

El paquete react-translate-provider es un sistema que te permite traducir tus componentes a más de un idioma de manera sencilla

Como se usa

Instalación

Primero vamos a instalar react-translate-provider

npm i react-translate-provider

yarn add react-translate-provider

Configuración del componente

Primero vamos a inicializar nuestro componente con los parametros de configuración.

import Translate from "react-translate-provider";

//Definir el objeto con los idiomas.
const language = {
  es: {
    hello: "Hola",

    bye: "Adios"
  },
  en: {
    hello: "Hello",

    bye: "Bye"
  }
};

class App extends React.Component {
  render() {
    const { language } = this.props;
    return (
      <div>
        <h2>{language.hello}</h2>
        <h2>{language.bye}</h2>
      </div>
    );
  }
}

export default Translate({ lang: language, default: "es" })(App);

Cuando exportamos nuestro componente con Translate creamos un nuevo React.Context y lo guardamos para despues poder suscribirnos a el.

Si nosotros queremos cambiar el idioma, podemos hacerlo mediante la funcion connectT que incluye el paquete react-translate-provider

Ejemplo:

import { connectT } from "react-translate-provider";

class Header extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.changeLang("en")}>EN</button>
        <button onClick={() => this.props.changeLang("es")}>ES</button>
      </div>
    );
  }
}

export default connectT(Header);