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

👏 Credits

• TSDX