Skip to content

celebryts/react-autocomplete-tags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.
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