React: Add styling and letter on new line for specific letters in a string

Question

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;

Answer 1

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:

1. Use a library like draft.js to achieve what you want.

2. "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.