Skip to content

Commit 67949a2

Browse files
harshzalavadiyaharshzalavadiya
committed
🎉 initial code
0 parents  commit 67949a2

File tree

16 files changed

+13264
-0
lines changed

16 files changed

+13264
-0
lines changed

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.github/workflows/main.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: CI
2+
on: [push]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
7+
steps:
8+
- name: Begin CI...
9+
uses: actions/checkout@v2
10+
11+
- name: Use Node 12
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: 12.x
15+
16+
- name: Use cached node_modules
17+
uses: actions/cache@v1
18+
with:
19+
path: node_modules
20+
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
21+
restore-keys: |
22+
nodeModules-
23+
24+
- name: Install dependencies
25+
run: yarn install --frozen-lockfile
26+
env:
27+
CI: true
28+
29+
- name: Build
30+
run: yarn build
31+
env:
32+
CI: true
33+
34+
- name: Publish
35+
if: startsWith(github.ref, 'refs/tags/')
36+
run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
37+
env:
38+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*.log
2+
.DS_Store
3+
node_modules
4+
.cache
5+
dist

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
12

‎.storybook/main.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.(ts|tsx)'],
3+
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
4+
webpackFinal: async (config) => {
5+
config.module.rules.push({
6+
test: /\.(ts|tsx)$/,
7+
use: [
8+
{
9+
loader: require.resolve('ts-loader'),
10+
options: {
11+
transpileOnly: true,
12+
},
13+
},
14+
{
15+
loader: require.resolve('react-docgen-typescript-loader'),
16+
},
17+
],
18+
});
19+
20+
config.resolve.extensions.push('.ts', '.tsx');
21+
22+
return config;
23+
},
24+
};

‎.storybook/preview-head.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<style>
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
html,
7+
body,
8+
#root {
9+
height: 100%;
10+
font-family: sans-serif;
11+
}
12+
13+
.rti--container {
14+
max-width: 300px;
15+
}
16+
</style>

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Harsh Zalavadiya
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# react-tag-input-component
2+
3+
lightweight component for tag(s) input
4+
5+
[![GitHub Actions Status](https://github.com/harshzalavadiya/react-tag-input-component/workflows/NodeJS/badge.svg)](https://github.com/harshzalavadiya/react-tag-input-component/actions)
6+
[![NPM](https://img.shields.io/npm/v/react-tag-input-component.svg)](https://npm.im/react-tag-input-component)
7+
[![gzip](https://badgen.net/bundlephobia/minzip/react-tag-input-component@latest)](https://bundlephobia.com/result?p=react-tag-input-component@latest)
8+
9+
also see [multi select component](https://github.com/harshzalavadiya/react-multi-select-component)
10+
11+
## ✨ Features
12+
13+
- 🍃 Lightweight (2KB including styles 😎)
14+
- 💅 Themeable
15+
- ✌ Written w/ TypeScript
16+
17+
## 🔧 Installation
18+
19+
```bash
20+
npm i react-tag-input-component # npm
21+
yarn add react-tag-input-component # yarn
22+
```
23+
24+
## 📦 Example
25+
26+
![Example](preview.gif)
27+
28+
```tsx
29+
import React, { useState } from "react";
30+
import TagsInput from "react-tag-input-component";
31+
32+
const Example = () => {
33+
const [selected, setSelected] = useState(["papaya"]);
34+
35+
return (
36+
<div>
37+
<h1>Add Fruits</h1>
38+
<pre>{JSON.stringify(selected)}</pre>
39+
<TagsInput
40+
value={selected}
41+
onChange={setSelected}
42+
seprators={["Enter", ","]}
43+
name="fruits"
44+
placeHolder="enter fruits"
45+
/>
46+
<em>press enter or comma to add new tag</em>
47+
</div>
48+
);
49+
};
50+
51+
export default Example;
52+
```
53+
54+
## 👀 Props
55+
56+
| Prop | Description | Type | Default |
57+
| ------------- | ------------------------------------- | ----------------------- | ----------- |
58+
| `name` | value for name of input | `string` | |
59+
| `placeholder` | placeholder for text input | `string` | |
60+
| `value` | initial tags | `string[]` | `[]` |
61+
| `onChange` | onChange callback (added/removed) | `string[]` | |
62+
| `onBlur` | input `onBlur` callback | `event` | |
63+
| `seprators` | when to add tag (i.e. `Space`, `,`) | `string[]` | `["Enter"]` |
64+
| `onExisting` | if tag is already added then callback | `(tag: string) => void` | |
65+
| `onRemoved` | on tag removed callback | `(tag: string) => void` | |
66+
67+
## 💅 Themeing
68+
69+
You can override CSS variables to customize the appearance
70+
71+
```css
72+
.rti--container {
73+
--rti-bg: "#fff",
74+
--rti-border: "#ccc",
75+
--rti-main: "#3182ce",
76+
--rti-radius: "0.375rem",
77+
--rti-s: "0.5rem", /* spacing */
78+
--rti-tag: "#edf2f7",
79+
--rti-tag-remove: "#e53e3e",
80+
}
81+
```
82+
83+
> use `!important` if CSS variables are not getting applied
84+
85+
## 🤠 Credits
86+
87+
- [TypeScript](https://github.com/microsoft/typescript)
88+
- [TSDX](https://github.com/jaredpalmer/tsdx)
89+
- [Goober](https://github.com/cristianbote/goober)
90+
91+
## 📜 License
92+
93+
MIT &copy; [harshzalavadiya](https://github.com/harshzalavadiya)

‎package.json‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"name": "react-tag-input-component",
3+
"description": "lightweight component for tag(s) input",
4+
"version": "1.0.0",
5+
"license": "MIT",
6+
"author": "Harsh Zalavadiya",
7+
"module": "dist/react-tag-input-component.esm.js",
8+
"main": "dist/index.js",
9+
"typings": "dist/index.d.ts",
10+
"sideEffects": false,
11+
"engines": {
12+
"node": ">=10"
13+
},
14+
"scripts": {
15+
"start": "tsdx watch",
16+
"build": "tsdx build && filesize",
17+
"lint": "tsdx lint",
18+
"prepare": "tsdx build && filesize",
19+
"storybook": "start-storybook -p 6006",
20+
"build-storybook": "build-storybook"
21+
},
22+
"peerDependencies": {
23+
"react": ">=16"
24+
},
25+
"dependencies": {
26+
"goober": "^2.0.18"
27+
},
28+
"devDependencies": {
29+
"@ampproject/filesize": "^4.2.0",
30+
"@babel/core": "^7.12.10",
31+
"@storybook/addon-actions": "^6.1.11",
32+
"@storybook/addon-docs": "^6.1.11",
33+
"@storybook/addon-info": "^5.3.21",
34+
"@storybook/addon-links": "^6.1.11",
35+
"@storybook/addons": "^6.1.11",
36+
"@storybook/react": "^6.1.11",
37+
"@types/react": "^17.0.0",
38+
"@types/react-dom": "^17.0.0",
39+
"babel-loader": "^8.2.2",
40+
"husky": "^4.3.6",
41+
"react": "^17.0.1",
42+
"react-docgen-typescript-loader": "^3.7.2",
43+
"react-dom": "^17.0.1",
44+
"react-is": "^17.0.1",
45+
"ts-loader": "^8.0.12",
46+
"tsdx": "^0.14.1",
47+
"tslib": "^2.0.3",
48+
"typescript": "^4.1.3"
49+
},
50+
"prettier": {
51+
"printWidth": 80,
52+
"semi": true,
53+
"singleQuote": false,
54+
"trailingComma": "es5"
55+
},
56+
"husky": {
57+
"hooks": {
58+
"pre-commit": "tsdx lint"
59+
}
60+
},
61+
"files": [
62+
"dist",
63+
"src"
64+
],
65+
"filesize": {
66+
"track": [
67+
"./dist/*.production.min.js"
68+
]
69+
},
70+
"keywords": [
71+
"react",
72+
"tag",
73+
"tags",
74+
"input",
75+
"picker",
76+
"component",
77+
"minimal",
78+
"tiny",
79+
"lightweight"
80+
]
81+
}

‎preview.gif‎

59.9 KB
Loading

0 commit comments

Comments
 (0)