react-image-tagging v1.0.1

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