react-tags-awesome v1.0.0

react-tags-awesome

Install

npm install react-tags-awesome

Introduce

Actually, There are two react components Tags and Tag, you can get the difference by it name obviously. you may custom these component style and we provide more configuration for you!

Example

import Tags, { Tag } from 'react-tags-awesome';
// const tags=['a','b','c'];  //It also support simple array
const tags=[
       {
        name:'test1',
        closable:false,
        visible:false,
        style:{
            background:'red',
            fontSize:'20px'
           }
       }
     ];

export default class App extends  React.Component{
    handleClose(closedItem,leftItems){

    }
    render() {
        return (
          <Fragment> 
            <Tags
               tags={tags}
                clearAll={false}
                closable={false}
                onClose={(closedItem,leftItems)=>this.handleClose(closedItem,leftItems)}
                onBeforeClose={(closedItem)=>{return false}}
            />
            <Tag  
                {...tags[0]}
                onClose={(closedItem,leftItems)=>this.handleClose(closedItem,leftItems)}
               />
          </Fragment>
        )
    }

};

Props

Tags Component

tags Item ( each item is object )

Tag Component