React-Tagaroo

React-Tagaroo is a reusable, customizable, and lightweight React component that allows developers to manage tags or keywords dynamically. This component provides functionality to add, remove, and clear tags, making it suitable for forms, filters, or any application where dynamic tag management is required.

🚀 Features

• Add tags dynamically with keyboard events (Enter or Comma).
• Remove individual tags with a button.
• Clear all tags at once with a single click.
• Fully customizable labels, placeholders, and styles.
• Lightweight and easy to integrate into your React projects.

📦 Installation

Install the package using npm or yarn:

npm install react-tagaroo
# or
yarn add react-tagaroo

🚀 Usage

import React, { useState } from "react";
import TagsField from "react-tagaroo";

const App = () => {
  const [tags, setTags] = useState([]);

  return (
    <div style={{ padding: "2rem" }}>
      <h1>React Tagaroo Example</h1>
      <TagsField
        tags={tags}
        setTags={setTags}
        label="Add Tags"
        placeholder="Type and press Enter or comma to add tags"
      />
      <div>
        <h3>Current Tags:</h3>
        <ul>
          {tags.map((tag, index) => (
            <li key={index}>{tag}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

📜 Props

| Prop | Type | Required | Default | Description | | ------------- | ---------- | -------- | --------------------------------- | --------------------------------------------------------- | | tags | Array | ✅ | [] | Array of current tags. | | setTags | Function | ✅ | - | Callback to update the tags array. | | label | String | ❌ | "Tags" | Label text for the input field. | | placeholder | String | ❌ | "Type and press Enter or comma" | Placeholder text for the input field. | | errors | String | ❌ | "" | Error message to display below the input (if applicable). |

📚 License

This project is licensed under the MIT License.