https://github.com/harshmakadia/reactjs-tag-component

Ready to use tag component using npm package
https://github.com/harshmakadia/reactjs-tag-component

javascript reactjs

Last synced: 1 day ago
JSON representation

Ready to use tag component using npm package

• Host: GitHub
• URL: https://github.com/harshmakadia/reactjs-tag-component
• Owner: Harshmakadia
• Created: 2018-01-24T09:16:48.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-12T14:26:21.000Z (over 4 years ago)
• Last Synced: 2024-12-14T07:56:38.284Z (about 1 month ago)
• Topics: javascript, reactjs
• Language: JavaScript
• Homepage:
• Size: 73.2 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# reactjs-tag-component





  

  



Find out more on npmjs.com

![Preview](https://github.com/Harshmakadia/reactjs-tag-component/blob/master/images/tags.gif)

Easy steps to install and use the tags component in reactJS.

Follow following to get started :

1. npm install tags-pro

upon successful installation let's include this in the main file

```javascript

import Tags from 'tags-pro';

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Tags from './tags';

class App extends Component {

  render() {

    return (

      


        

          

          
Welcome to React

        

        


          To get started, edit src/App.js and save to reload.

        

          

      

    );

  }

}


export default App;

```

Following are the props that can be passed to  component to use it

| Props Name        | values           | Description  |

| ------------- |:-------------:| -----:|

| dataSource      | [{name: 'Hello', id: '1'}] | Pass the array of object here with object containing name and id  |

| isReadOnly      | Boolean Eg:(true/false)      |   This flag with enable deleting of tags when hovered on it if set to false |

| borderColor | ColorName or ColorCode Eg:(blue/#dcdcdc)      |    Border color for tags

| borderColorHover | ColorName or ColorCode Eg:(blue/#dcdcdc)      |    Border color for tags when hovered|

| backgroundColor | ColorName or ColorCode Eg:(blue/#dcdcdc)      |    Background color for tags |

| backgroundColorHover | ColorName or ColorCode Eg:(blue/#dcdcdc)       |    Background color for tags when hovered over it |

| fontSize | Font size Eg:(14)     |    Pass the font size here as per required |

| fontColor | color Eg:(blue/#dcdcdc)     |    Change the text color which is needed |