🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React component that builds a tag/token input with autocomplete support.

Form React

Documentation

react-autocomplete-tags

A React component that build a Autocomplete with tags.

Demos

https://celebryts.github.io/react-autocomplete-tags

Installation

npm install @celebryts/react-autocomplete-tags --save

or

yarn add @celebryts/react-autocomplete-tags

Basic Usage

import React, { Component } from 'react' import Autocomplete from 'react-autocomplete-tags'  class Example extends Component {    constructor(props){     super(props)     this.state = {       suggestions: [         {           label: 'Suggestions 1',           value: '1'         },         {           label: 'Suggestions 2',           value: '2'         },         {           label: 'Another suggestions',           value: 'X'         }       ]     }   }    onChange = (value) => {     console.log('Value received from onChange: ' + value)   }    render(){     return (       <Autocomplete         suggestions={this.state.suggestions}         onChange={this.handleChange}       />     )   } }

Props

Prop Type Default Description
className String '' Classname to style the root div.
suggestions Array [] Suggestions to show.
tags Array [] Visible tags in input.
limitTags Number null Maximum allowed tags.
allowCreateTag Boolean true If user can create tags without restritions.
saveOnBlur Boolean false If component must add current input value on blur.
delay Number null Delay in onChange event after user changes.
onKeyUp Function ()=>{} Callback for key up event.
onKeyDown Function ()=>{} Callback for key down event.
onFocus Function ()=>{} Callback for focus event.
onChange Function ()=>{} Callback for changes in input.

className : String

Css class to stylize the component:

<Autocomplete className="my-css-class" />

This will be applied into <div> element that wrap the other Autocomplete elements.

You can style elements like this:

.my-css-class{   background-color: #f0f0f0; }  .my-css-class > div{   padding: 20px 0; }  .my-css-class input{   margin: 0 10px; } 

suggestions : Array

Array of suggestions to show. It needs to be an array of objects:

<Autocomplete suggestions={   [     {       label: 'Suggestion 1',       value: 'IdOfSuggestion1'     },     {       label: 'Suggestion 2',       value: 'IdOfSuggestion2'     }   ] } />

label is the text to be showed on suggestions area of the Autocomplete.

value is the value of the showed label.

It's similar to the label/value funcionality of HTML <option> .

tags : Array

Array of tags that are initially rendered on input. The usage is similar to suggestions.

<Autocomplete tags={   [     {       label: 'Tag 1',       value: 'IdOfTag1'     },     {       label: 'Tag 2',       value: 'IdOfTag2'     }   ] } />

limitTags : Number

You can set whether the input will have a limit amout.

<Autocomplete   limitTags={2}   tags={     [       {         label: 'Tag 1',         value: 'IdOfTag1'       }     ]   } />

In the above example, user will be able to add only 2 tags. (Or erase the first and write another 3).

allowCreateTag : Boolean

Its possible block the creation of tags, thus the user will be able to put only tags that were been suggesteds in input.

<Autocomplete   allowCreateTag={false}   suggestions={     [       {         label: 'Choose one option',         value: 'IdOfSuggestion1'       },       {         label: 'You cannot create tags',         value: 'IdOfSuggestion1'       },       {         label: 'Last chance',         value: 'IdOfSuggestion2'       }     ]   } />

saveOnBlur : Boolean

When the event blur occurs, the typed text (even if not sent) will be transformed into a tag.

<Autocomplete saveOnBlur={true} />

delay : Number

Sometimes we don't need the event onChange immediately after user action, so, we can add a delay (milliseconds) to this happen.

<Autocomplete   delay={300}   onChange={this.handleChange} />

Issues

You can report your issues here

Pull Requests

Pull Requests are always welcome! :)

Clone the repository: https://github.com/celebryts/react-autocomplete-tags, and run the command:

npm run dev

Authors

Built by Celebryts


You May Also Like