String text passed in as a value in <textarea> does not seem to be supported with react-linkify

[BrianHHough]

Hi Linkify! LOVE your SDK by the way 🔥

I'm trying to take in a text area and then identify handles or hashtags or links in the . I can do this 100% with Div's, strings, etc. but for some reason, Linkify won't recognize the actual text inside of the <textarea> to put links to it.

Is there a way to use the {children} module of Linkify to then ID the text inside of a child component and then Linkify that?

Any help understanding how to do this would be really appreciated!

Thank you!

My attempted code:

var text = "Hey there I'm a text posted by: @user1 \n #newPosterHere \n https://thisisawebsitethatshouldbelinked.com"

<Linkify
        componentDecorator={textareaDecorator}
        matchDecorator={matchDecoratorTextArea}
      >
   <textarea
          id="textarea"
          fontSize="15px"
          lineHeight="25px"
          readOnly
          name="textarea"
          value={text}
          style={{
            width: "400px",
            height: "100px"
          }}
        >
   </textarea>
</Linkify>

[fvsch]

Textareas only work with plain text.

You need a fully-fledged editor like ProseMirror if you want to do rich text formatting like making links clickable, injecting avatars, etc.

If you only plan to render text in a non-editable way, I suggest using another element (e.g. a DIV) instead of <textarea readOnly>.