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: 6 months 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 (8 months ago)
• Default Branch: main
• Last Pushed: 2024-11-30T14:42:14.000Z (8 months ago)
• Last Synced: 2024-12-30T12:18:25.797Z (7 months ago)
• Topics: component, input, react, taginput, tags
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-multitag
• Size: 276 KB
• Stars: 1
• 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 with advanced keyboard navigation.

![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                      |

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

| `navigationMode`                  | How the keyboard navigation should behave: 


**tag** (default): Navigate through tags and delete with 'Backspace'

**input**: Move the input position to add new elements between existing ones

                                                                | `"tag"` or `"input"`                |

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

| `onChange`                        | Callback with new tag list                                                      | `(tags: string[]) => void`|

| `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`                  |

| `onDuplicate` (optional)          | Callback when a duplicate value is entered (with the duplicate value)           | `(tag: string) => void`   |