1.0.0 • Published 2 years ago

react-simple-tagged-input v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

React simple tagged input

MIT GitHub Actions Status NPM

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


PropDescriptionTypeDefault
defaultDataArray of preloaded Dataarray[]
placeholderPlaceholder for text inputstringType and press Enter
canDuplicateEnable multiple tag with the same namebooleanfalse
editOnRemoveEnable tag editing when removedbooleanfalse
autoFocusautofocus for text inputbooleantrue
inputStyleStyle for text inputobject
inputClassClassName for text inputstring
stylestyle for containerobject{}
containerClassNameClassName for containerstring""
onInputChangeCallback for onChange eventfunction
onRemoveTagCallback when a tag is removedfunction
onAddTagCallback when a tag is addedfunction
onExistingCallback when a tag already existfunction
tagStylestyle for tagobject
tagRemoveButtontag remove botton propsobject

👏 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