DEV Community

Create a tags input component in ReactJs

Praveen Bisht on July 11, 2019

Project Setup We are going to be building the component using ReactJs. Let's start by installing the essentials. First we're going to ...
Collapse
 
mcusack60 profile image
mcusack60 • Edited

Nice tutorial! Easy to follow. Have a question on this:
Has anyone used this but added functionality to find existing values of tags (from a database, for example. I don't need help with the fetching the values) and present those as options to select from?

-Mike

Collapse
 
prvnbist profile image
Praveen Bisht

Not sure but to extend this with such functionality one just have to listen to input and and display the matching options in dropdown and on select push the selected option to the tags list.

Let me know if you need help with this.

Collapse
 
debrajhyper profile image

Hey, Thanks for the awsome explanation, is there a way to fix the addTags functionality in mobile view when there are lots of input field present after this component.

Actually in mobile view if there are many field present after the TagsInput component then "Enter" key is behaving like "Tab" to focus on the next input field.

Collapse
 
prvnbist profile image
Praveen Bisht

Thanks for your input, I'll try to reproduce and fix it

Collapse
 
debrajhyper profile image
Debraj Karmakar

Looking forward for your solution. ☺

Collapse
 
gvinod1991 profile image
Vinod Godti

Great one

Collapse
 
singhayush profile image
singh-ayush

Hey, Nice tutorial, is there any way we can add a max tag limit to this

Collapse
 
prvnbist profile image
Praveen Bisht

yea, you can set the limit check in addTags function and also disable input field if tag limit has been reached.

Collapse
 
joaovmvini profile image
joaovmvini

Nice article, thanks for sharing! I have build one, check it out: jsuites.net/v3/javascript-tags

Collapse
 
atiarbshhi profile image
AtiArbshhi

Hi,

I used your tutorial to create tags, but when I refresh the page, the tags will not stay and will disappear. Can you help me with this?

Collapse
 
prvnbist profile image
Praveen Bisht

You would have to persist the tags by storing in some database or local storage, whichever works with your usecase

Collapse
 
tarcianodias profile image
Tarciano Dias

Welsome article, good job!!

Collapse
 
laurosca profile image
laurosca • Edited

Nice article!
Also you can add flex: 1; to the input for a full width or remaining space clickable area.

Collapse
 
prvnbist profile image
Praveen Bisht

Sweet, that works wonders!

Collapse
 
hafizfarooq78690 profile image
Hafiz Muhammad Farooq

good job man