tagging functionality ux

ssssadsadasd · 2025-04-26T19:50:27.616+00:00

think of sth like twitter, where in a post the user can tag some other users. the tags have a certain color and are clickable. I believe I have completed the backend logic now I want to render the post content in the UI.so supposethe posts will be sth like this (where obviously the tags and text are dynamic):"@elonmusk is the ceo of x" how can I make @elonmusk blue and clickable and possible triggering an action in my nordcraft app?thanks

ssssadsadasd
1 year ago
think of sth like twitter, where in a post the user can tag some other users. the tags have a certain color and are clickable.
I believe I have completed the backend logic now I want to render the post content in the UI.

so supposethe posts will be sth like this (where obviously the tags and text are dynamic):
"@elonmusk is the ceo of x"

how can I make @elonmusk blue and clickable and possible triggering an action in my nordcraft app?

thanks
Lucas G
1 year ago
Unless I'm misunderstanding the scenario here, it should just be a matter of creating a 'tag' component which can be a simple element with a span and color variable with a click event
ssssadsadasd
1 year ago
@Lucas G thanks.
are you thinking sth like this. I split the text by regex and then I have three texts:

@elonmusk
is the ceo of
@x

then for each I have: show span if it does not start with @ and show the tag component if it starts with @ similar to the video below. this would mean for each split we would have to elements right (span and tag component)?
thanks
https://www.tella.tv/video/formatting-text-with-regex-e8y6
@ssssadsadasd
@Lucas G thanks.
are you thinking sth like this. I split the text by regex and then I have three texts:

@elonmusk
is the ceo of
@x

then for each I have: show span if it does not start with @ and show the tag component if it starts with @ similar to the video below. this would mean for each split we would have to elements right (span and tag component)?
thanks
https://www.tella.tv/video/formatting-text-with-regex-e8y6
Lucas G
1 year ago
I wouldn't split that. Those items would be saved in a db most likely
column: tag, value: @tag
column: role, value: role
etc
ssssadsadasd
1 year ago
sorry I think I was not clear. the post can also be sth like this:
@ronaldo is a great entertainer
Lucas G
1 year ago
Got it, so you're tying to add a tag to anything starting with @
I was thinking something like post tags
Sounds like you already had it figured out then
👍1
Lucas G
1 year ago
Update: Took a look and splitting wouldn't work as it creates multiple spans which creates issues with properly wrapping text
Lucas G
1 year ago
The text should just be a single text block with inline spans for the tags
ssssadsadasd
1 year ago
@Lucas G so you think my solution is fine?
just for the record, if there are no tags there is only one span, for each tag a span is added.

tagging functionality ux

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

Lucas G

Lucas G

ssssadsadasd