react-image-tagging

React Image Tagging Component

Installation

npm i react-image-tagging

Usage

import React, { useState } from "react";
import TaggableImage from "react-image-tagging";

const ImageTaggingExample = () => {
  const img = "https://www.kamilaphotoart.com/wp-content/uploads/2019/06/IMG_7870.jpg"
  const [ myTags, setMyTag ] = useState([])
  const [ tagText, setTagText ] = useState('')

  function handleAddTag(newTag) {
    setTagText('')
    setMyTag([...myTags, newTag])
  }

  function handleRemoveTag(tagToRemove) {
    const updatedTags = myTags.filter(tag => tag !== tagToRemove)
    setMyTag(updatedTags)
  }

  return (
    <>
      <input 
        autoComplete='off' 
        style={{marginLeft:10}} 
        type='text' name='tag' 
        value={tagText} 
        onChange={(e) => setTagText(e.target.value)}
      />
      <div style={{width:'60%'}}> 
        <ImageTagging 
          imageURL = {img} 
          tags = {myTags} 
          newTag = {tagText} 
          onTagAdd= {handleAddTag}
          onTagRemove= {handleRemoveTag}
        />
      </div>
    </>
  )
}

Props

Prop	Type	Description	Default/Required
src	string	Image src attribute	Required
alt	string	Image alt attribute
tags	array[object]	Array of tags	Required
newTag	string	Text of new tag
onTagAdd	function	Returns new added tag
allowAddingTags	boolean	Allow to add new tags	true
allowEmptyTags	boolean	Allow to add empty tags	true
onTagRemove	function	Returns tag to remove
removable	boolean	Allow to remove tags	true
showOnHover	boolean	Show tags only when image hovering	false
tagColor	string	Background color of a tag	'#ffffff'
deleteIconColor	string	Color of the remove tag icon	'#808080'
hoverDeleteIconColor	string	Color of the remove tag icon when icon hovering	'#000000'
tagTextStyle	object	Style attributes for tag text