https://github.com/benaandrew/react-multitag

A simple and lightweight tag list input component
https://github.com/benaandrew/react-multitag

component input react taginput tags

Last synced: 30 days ago
JSON representation

A simple and lightweight tag list input component

• Host: GitHub
• URL: https://github.com/benaandrew/react-multitag
• Owner: BenAAndrew
• License: mit
• Created: 2024-11-27T19:55:55.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-28T22:16:07.000Z (30 days ago)
• Last Synced: 2024-11-28T23:01:55.321Z (30 days ago)
• Topics: component, input, react, taginput, tags
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-multitag
• Size: 178 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Multitag

A simple and lightweight tag list input component.

![Preview](preview.gif)

[![Edit react-tag-input-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/c3g567)

## 🪄 Features

- Navigate and delete elements using the keyboard

- Automatically add items with keyboard input and support for custom keybinds

- Add custom tag elements with props for delete actions and selection styling

## ✏️ Example code

```

import React, { useState } from "react";

import { Taglist } from "react-multitag";

const Example = () => {

  const [tags, setTags] = useState([]);

  return ;

};

export default Example;

```

## ⚙️ Props

**This extends all default HTML input props** (which control the text input element)

| Prop                              | Description                                                                     | Type                      |

| -------------------               | ------------------------------------------------------------------------------- | ------------------------- |

| `value`                           | Current tag list                                                                | `string[]`                |

| `onChange`                        | Callback with new tag list                                                      | `string[]`                |

| `TagComponent` (optional)         | Custom component for the tag element (implementing the TagProps interface)      | `ComponentType` |

| `separators` (optional)           | List of keys triggering tag to be added (defaults to 'Enter' & ',')             | `string[]`                |

| `containerClassName` (optional)   | Custom classname for the wrapping container (div)                               | `string`                  |

| `inputClassName` (optional)       | Custom classname for the input                                                  | `string`                  |