tags-input-reactjs
v1.4.12
Published
React Tags
Downloads
149
Maintainers
Readme
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