Chips Input

For input multiple texts as chips.

Installation

1npm i chips-input-lib

Usage

The component can be used as below.

• View

• Source

1import { ChipsInput } from 'chips-input-lib';
2
3
4const onAddChips = (cities) => {
5  console.log(cities);
6};
7
8function App() {
9  return (
10    <div className="App">
11      <ChipsInput onAddChips={onAddChips} placeholder="Insert Cities"/>
12    </div>
13  );
14}
15
16export default App;
17

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.