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

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.
`placeholder`	String	''	Placeholder on input box.
`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;
}

`placeholder` : String

Placeholder on autocomplete input box.

<Autocomplete placeholder="Insert your tags here" />

`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

celebryts / react-autocomplete-tags Goto Github PK