1.0.0 • Published 2 years ago
react-simple-tagged-input v1.0.0
React simple tagged input
A light react component for tag(s) input
🔥 Features
- 🌴 Add multiple tags at a time
- 🖲️ Mouse and keyboard support
- 🗑️ Use Backspace to remove last tag
- 💅 Customizable
- 🔔 Notify when tag add or remove
- 🙌 Typescript support
⚒️ Installation
via npm
npm install react-simple-tagged-input
via yarn
yarn add react-simple-tagged-input
🚀 Demo
import React, { useState } from 'react';
import { TagInput } from 'react-simple-tagged-input';
const Demo = () => {
// States
const [selected, setSelected] = React.useState([]);
// Methods
const handleTagRemove = tag => {
console.log(`${tag} has been removed`);
};
const handleTagAdd = tag => {
console.log(`${tag} has been added`);
};
const handleTagExist = tag => {
console.log(`${tag} already exit`);
};
// Data to display
return (
<div>
<div className="">{JSON.stringify(selected)}</div>
<br />
<br />
<TagInput
defaultData={['Javascript', 'React', 'Typescript']}
onInputChange={setSelected}
onRemoveTag={handleTagRemove}
onAddTag={handleTagAdd}
onExisting={handleTagExist}
style={{
border: '2px solid gray',
borderRadius: '5px',
padding: '7px',
}}
//
// inputStyle={{ color: 'dodgerblue' }}
// tagStyle={{ backgroundColor: 'dodgerblue', color: 'white' }}
// tagRemoveButton={{
// icon: 'minus' || 'minus',
// iconStyle: { color: 'white' },
// buttonStyle: { backgroundColor: 'tomato' },
// }}
// placeholder=""
// canDuplicate={false}
// editOnRemove={false}
// inputClass="input-class"
// containerClassName="container-class"
/>
</div>
);
};
export default Demo;
🍿 Props
Prop | Description | Type | Default |
---|---|---|---|
defaultData | Array of preloaded Data | array | [] |
placeholder | Placeholder for text input | string | Type and press Enter |
canDuplicate | Enable multiple tag with the same name | boolean | false |
editOnRemove | Enable tag editing when removed | boolean | false |
autoFocus | autofocus for text input | boolean | true |
inputStyle | Style for text input | object | |
inputClass | ClassName for text input | string | |
style | style for container | object | {} |
containerClassName | ClassName for container | string | "" |
onInputChange | Callback for onChange event | function | |
onRemoveTag | Callback when a tag is removed | function | |
onAddTag | Callback when a tag is added | function | |
onExisting | Callback when a tag already exist | function | |
tagStyle | style for tag | object | |
tagRemoveButton | tag remove botton props | object |
👏 Credits
0.0.40
2 years ago
0.0.41
2 years ago
1.0.0
2 years ago
0.0.42
2 years ago
0.0.20
2 years ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.24
2 years ago
0.0.25
2 years ago
0.0.37
2 years ago
0.0.38
2 years ago
0.0.39
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.30
2 years ago
0.0.31
2 years ago
0.0.32
2 years ago
0.0.33
2 years ago
0.0.34
2 years ago
0.0.35
2 years ago
0.0.36
2 years ago
0.0.26
2 years ago
0.0.27
2 years ago
0.0.28
2 years ago
0.0.29
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.1
2 years ago