Chips Input

For input multiple texts as chips.

Installation

npm i chips-input-lib

Usage

The component can be used as below.

• View

• Source

import { ChipsInput } from 'chips-input-lib';


const onAddChips = (cities) => {
  console.log(cities);
};

function App() {
  return (
    <div className="App">
      <ChipsInput onAddChips={onAddChips} placeholder="Insert Cities"/>
    </div>
  );
}

export default App;

Properties

| Name | Type | Default | Description | | ------------- | ------ | --------- | --------------------------------------------------------------------------------- | | placeholder | string | | Places holder of the text input. | | onAddChips | func | | A callback function type of (texts) => that is called when a new chip is added. | | chipBgColor | string | #f5f5f5 | Background color of the chips. | | chipColor | string | #9b9b9b | Font color of the chips. | | width | string | | The width of the chips input can be changed. Example: '480px','100%' | | fontFamily | string | inherit | To change the font family of the ChipsInput. Example '"Gill Sans", sans-serif' | | chipFontSize | string | inherit | The font size of the chips. Example: '12px' | | inputFontSize | string | inherit | The font size of the input text. Example: '12px' |

License

The files included in this repository are licensed under the MIT license.