Tags Input

Simple react tags input with React, TypeScript and Tailwindcss.

Installation

npm install --save tags-input-reactjs

yarn add tags-input-reactjs

Features

Available props

| | Props | Types | Default | | | :-: | :------------------------- | :------------------------------------------------------------ | :------------------------------------ | :-------: | | 1 | mode | 'array-of-string' or 'multi-select' or'advanced-multi-select' | -------- | Mandatory | | 2 | theme | 'light' or 'dark' | light | optional | | 3 | maxTags | number | -------- | optional | | 4 | defaultSelectedTags | string[] | -------- | optional | | 5 | categoriesTags | string[] | | optional | | 6 | onChange | (tags: string[]) => void | | optional | | 7 | title | string | | optional | | 8 | inputPlaceholder | string | 'آیتم‌ها را با Enter از هم جدا کنید.' | optional | | 9 | inputClassName | string | | optional | | 10 | addToCategoryOnClick | (value: string) => boolean | | optional | | 11 | dropDownContainerClassName | string | | optional | | 12 | tagsContainerClassName | string | | optional | | 13 | tagsClassName | string | | optional | | 14 | selectedTagClassName | string | | optional | | 15 | selectedTagCloseIconClass | string | | optional | | 16 | closeIcon | component | | optional |

Simple Usage

// In layout.tsx file in Nextjs 13.4 project added this
import 'tags-input-reactjs/styles.css';

// In _app.tsx file in Nextjs < 13.4 project added this
import 'tags-input-reactjs/styles.css';

// Add this in the component you want to use in Nextjs
import ReactTags from 'tags-input-reactjs';

// In App.jsx or App.tsx file in Vite React or create-react-app projects added this
import ReactTags from 'tags-input-reactjs';
import 'tags-input-reactjs/styles.css';

import ReactTags from 'tags-input-reactjs';

const App = () => {
    return (
        <div>
            <ReactTags mode="array-of-string" />
        </div>
    );
};

Advanced Examples

// in layout.tsx file in nextjs project added this
import 'tags-input-reactjs/styles.css';

// in App.jsx or App.tsx file in React project added this
import ReactTags from 'tags-input-reactjs';
import 'tags-input-reactjs/styles.css';

// in App.jsx or App.tsx file in Vite React project added this
import ReactTags from 'tags-input-reactjs';
import 'tags-input-reactjs/styles.css';

import { useState } from 'react';
import ReactTags from 'tags-input-reactjs';

const App = () => {
    const [tags, setTags] = useState(['apple', 'orange', 'banana']);
    const [categoriesTags, setCategoriesTags] = useState(['apple', 'orange', 'banana', 'kiwi', 'grape']);

    return (
        <div>
            <ReactTags
                mode="advanced-multi-select"
                title="My Tags"
                maxTags={5}
                theme="dark"
                defaultSelectedTags={tags}
                onChange={(tags) => setTags(tags)}
                categoriesTags={categoriesTags}
                addToCategoryOnClick={(value) => setCategoriesTags([...categoriesTags, value])}
            />
        </div>
    );
};

License

Licensed under MIT