For input multiple texts as chips.
npm i chips-input-libThe 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;| 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' |
The files included in this repository are licensed under the MIT license.