react-simple-tagged-input

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

---

• TSDX