Cómo hacer un selector de idioma en React

¿Cómo es un selector de idioma?

¿Por qué se necesitan cambiadores de idioma?

Imagínese esto: está en unas vacaciones muy esperadas en un país extranjero vibrante. Te encuentras en un restaurante pintoresco ubicado en una zona turística popular. La emoción llena el aire mientras te preparas para embarcarte en una aventura culinaria. El mesero se acerca con una sonrisa, pero cuando abres el menú, comienza la confusión. Está en un idioma que no entiendes, y el mesero supuso que era el idioma que hablabas.

Ahora comienza una negociación bastante divertida entre usted y el camarero, tratando de descifrar el menú elemento por elemento, tratando de salvar la brecha del idioma utilizando gestos y fragmentos de palabras comunes. Lo que debería haber sido una deliciosa experiencia gastronómica se convierte en una situación cómica, que destaca la necesidad de una comunicación y comprensión claras. Esta anécdota resume perfectamente por qué los conmutadores de idioma son esenciales en el contenido digital actual. Así como el menú del restaurante no satisfizo sus necesidades de idioma, los sitios web y las aplicaciones pueden presentar involuntariamente contenido en un idioma que no se alinea con las preferencias o el dominio de sus usuarios. En esos momentos, un conmutador de idiomas se convierte en su guía virtual, lo que les permite navegar por el panorama digital en un idioma que tenga sentido para ellos. En las siguientes secciones, exploraremos las mejores prácticas para implementarlas en sus aplicaciones React. Entonces, embarquémonos en un viaje de flexibilidad lingüística y diseño centrado en el usuario, asegurándonos de que cada usuario se sienta cómodo y comprometido, sin importar el idioma que hable.

Universalmente entendido

El idioma predeterminado de un sitio web o aplicación puede no ser comprensible para todos los usuarios. La incorporación de un elemento de interfaz de usuario de comprensión universal para el cambio de idioma garantiza que los usuarios, independientemente de su dominio del idioma, puedan identificar e interactuar con el cambiador de idioma sin esfuerzo. Un gran ejemplo de esto es un idioma estándar o un icono de globo terráqueo.

Las banderas no son suficientes

Si bien las banderas se asocian comúnmente con la selección de idioma, pueden ser engañosas o inexactas. Por ejemplo, muchos países tienen hablantes de español que no son de España. Confiar únicamente en las banderas para la indicación del idioma puede excluir o confundir a ciertos grupos de usuarios. En su lugar, se recomienda utilizar nombres de idioma claros o códigos de idioma en el conmutador de idioma. La lista de idiomas disponibles en el conmutador de idiomas debe expresarse en el idioma actual para facilitar la comprensión del usuario. Sin embargo, es igualmente importante incluir nombres de idiomas escritos en sus respectivos idiomas nativos. Esto se adapta a los usuarios que pueden reconocer mejor su idioma cuando se muestra en su escritura nativa.

Nombres de idiomas en inglés, español, francés y alemán.

	English	Spanish	French	German
English	English	Inglés	Anglais	Englisch
Spanish	Spanish	Español	Espagnol	Spanisch
French	French	Francés	Français	Französisch
German	German	Alemán	Allemand	Deutsch

En cada celda, el nombre del idioma en la fila idioma se presenta en el idioma especificado por la columna. Equipado con esta tabla, puede representar las opciones de idioma en su conmutador en cualquier condición.

Diseño e implementación

Para maximizar la encapsulación y el desacoplamiento del componente del resto de la aplicación, es importante definir sus requisitos de entrada y sus respuestas a las interacciones del usuario, como cambios en la selección y el entorno (p. ej., cambios en el idioma actual de la aplicación). Este componente está diseñado para ser puramente funcional, lo que significa que no necesita mantener su propio estado. En cambio, el idioma actual se considera parte del entorno en el que opera. Internamente, el componente utiliza un hash que representa la matriz de lenguaje 4x4 discutida anteriormente. El componente presenta dos atributos clave: "currentLanguage" y "onSelect". El atributo "currentLanguage" contiene el idioma seleccionado actualmente, mientras que el atributo "onSelect" es una función de devolución de llamada utilizada para manejar los cambios de selección de idioma. En este ejemplo en particular, el componente se basa en Tailwind para el estilo y la interfaz de usuario sin cabeza para ciertos aspectos de comportamiento. El botón de cambio muestra el idioma actual en su idioma nativo, acompañado del ícono de idioma internacional estándar y un ícono de cheurón para indicar que al hacer clic en el botón se revelan opciones adicionales. Los elementos del menú están envueltos en un elemento de transición para incorporar efectos visuales. Dentro de este elemento de transición, hay un código responsable de generar elementos de menú en función del hash del idioma. A los efectos de esta demostración, el componente contenedor mantiene el idioma seleccionado como estado para simular una aplicación completa. Además, establece una función para actualizar este estado, que sirve como función de devolución de llamada para el componente conmutador. Cada elemento de la lista desplegable de idiomas se representa con el nombre del idioma en el idioma actual y su respectivo idioma nativo.