I am new to ReactJS and building an app that highlights to the user whether a letter in a string is a consonant or a vowel by changing the letter's colour and adding a small 'c' or 'v' beneath the relevant letter.
I am struggling with implementing this and wondering how I add css styling and the 'c' or 'v' to a particular letter (grapheme) as the user types depending on whether it is a consonant or vowel.
Any advice would be very welcome, thanks!
Here is what I have so far:
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;
I think what you're trying to build is a text-rich based editor, something like what draft.js can achieve (note that this library is a HUGE one)
What you're trying to do can't be achieved with a normal text area. I can see 2 options:
Use a library like draft.js to achieve what you want.
"Fake" the display, so you'll have an element that where it tracks your key input (mimics a text area/input field), then style it on display.
So you can have a textarea like one above, but style it so the output doesn't show color: rgba and make the alpha 0 or any style that suits your need. Then on top of that is a div that display whatever you typed and you can style it line by line or even by letters.