Soy nuevo en ReactJS y estoy creando una aplicación que resalta al usuario si una letra en una cadena es una consonante o una vocal cambiando el color de la letra y agregando una pequeña 'c' o 'v' debajo de la letra correspondiente.
Tengo problemas para implementar esto y me pregunto cómo agrego estilo css y la 'c' o 'v' a una letra particular (grafema) a medida que el usuario escribe dependiendo de si es una consonante o una vocal.
Cualquier consejo será muy bienvenido, gracias!
Esto es lo que tengo hasta ahora:
const TextArea = () => { const registerKeyPresses = (e) => { let consonants = [ "b", "d", [...]//consonant list ]; let grapheme = e.key; for (let i = 0; i < consonants.length; i++) { if (grapheme === consonants[i]) { console.log("consonant"); } } }; return ( <form className="textinputframe"> <div className="textinputframe"> <textarea className="textinput" type="text" onKeyDown={registerKeyPresses} /> </div> </form> ); }; export default TextArea;Creo que lo que está tratando de construir es un editor basado en text-rich , algo así como lo que draft.js puede lograr (tenga en cuenta que esta biblioteca es ENORME)
Lo que está tratando de hacer no se puede lograr con un área de texto normal. Puedo ver 2 opciones:
Use una biblioteca como draft.js para lograr lo que desea.
"Falsifica" la pantalla, de modo que tendrás un elemento donde rastrea tu entrada clave (imita un área de texto/campo de entrada), luego dale estilo en la pantalla.
Entonces puede tener un área de texto como la de arriba, pero diseñe para que la salida no muestre color: rgba and make the alpha 0 o cualquier estilo que se adapte a sus necesidades. Luego, además de eso, hay un div que muestra lo que haya escrito y puede diseñarlo línea por línea o incluso por letras.