1.4.12 • Published 9 months ago
tags-input-reactjs v1.4.12
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
1.4.12
9 months ago
1.4.11
9 months ago
1.4.10
9 months ago
1.4.9
9 months ago
1.4.8
9 months ago
1.4.7
9 months ago
1.4.6
9 months ago
1.4.5
9 months ago
1.4.4
9 months ago
1.4.3
9 months ago
1.4.2
9 months ago
1.4.1
9 months ago
1.4.0
9 months ago
1.3.14
9 months ago
1.3.13
9 months ago
1.3.12
9 months ago
1.3.11
9 months ago
1.3.10
9 months ago
1.9.10
9 months ago
1.3.9
9 months ago
1.3.8
9 months ago
1.3.7
9 months ago
1.3.6
9 months ago
1.3.5
9 months ago
1.3.4
9 months ago
1.3.3
9 months ago
1.3.2
9 months ago
1.3.1
9 months ago
1.3.0
9 months ago
1.1.10
10 months ago
1.1.9
10 months ago
1.1.8
10 months ago
1.1.7
10 months ago
1.1.6
10 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.1.1
10 months ago
1.1.0
10 months ago
1.0.11
10 months ago
1.0.10
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago