Skip to content

Commit c5c0dd7

Browse files
harshzalavadiyaharshzalavadiya
committed
🎉 initial code
0 parents  commit c5c0dd7

26 files changed

+11276
-0
lines changed

‎.editorconfig

+9
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/nodejs.yml

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: NodeJS
2+
3+
on: push
4+
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
strategy:
9+
matrix:
10+
node: ["10"]
11+
name: Node ${{ matrix.node }}
12+
steps:
13+
- uses: actions/checkout@v1
14+
- name: Setup node
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: ${{ matrix.node }}
18+
19+
- name: Setup Yarn
20+
run: npm install -g yarn
21+
22+
- name: Install
23+
run: yarn install
24+
25+
- name: Build
26+
run: yarn build
27+
28+
- name: Publish
29+
if: startsWith(github.ref, 'refs/tags/')
30+
run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
31+
env:
32+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
5+
node_modules
6+
7+
# builds
8+
build
9+
dist
10+
.rpt2_cache
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎.vscode/settings.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.background": "#2965c5",
4+
"titleBar.activeBackground": "#4285F4",
5+
"titleBar.activeForeground": "#FBFAF9"
6+
}
7+
}

‎README.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# react-multi-select-component
2+
3+
Simple multiple selection dropdown component with `checkboxes`, `search` and `select-all`
4+
5+
[![Edit react-multi-select-component-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/muddy-brook-322qc?fontsize=14&hidenavigation=1&theme=dark)
6+
7+
[![GitHub Actions Status](https://github.com/harshzalavadiya/react-multi-select-component/workflows/NodeJS/badge.svg)](https://github.com/harshzalavadiya/react-multi-select-component/actions)
8+
[![NPM](https://img.shields.io/npm/v/react-multi-select-component.svg)](https://npm.im/react-multi-select-component)
9+
[![gzip](https://badgen.net/bundlephobia/minzip/react-multi-select-component)](https://bundlephobia.com/result?p=react-multi-select-component)
10+
11+
## ✨ Features
12+
13+
- 🍃 Lightweight (~14KB)
14+
- 💅 Themeable
15+
- ✌ Written w/ TypeScript
16+
17+
## 🔧 Installation
18+
19+
```bash
20+
npm i react-multi-select-component # npm
21+
yarn add react-multi-select-component # yarn
22+
```
23+
24+
## 📦 Example
25+
26+
![Example](preview.gif)
27+
28+
```tsx
29+
import React, { useState } from "react";
30+
import MultiSelect from "react-multi-select-component";
31+
32+
const Example: React.FC = () => {
33+
const options = [
34+
{ label: "Grapes 🍇", value: "grapes" },
35+
{ label: "Mango 🥭", value: "mango" },
36+
{ label: "Strawberry 🍓", value: "strawberry" }
37+
];
38+
39+
const [selected, setSelected] = useState([]);
40+
41+
return (
42+
<div>
43+
<h1>Select Fruits</h1>
44+
<pre>{JSON.stringify(selected)}</pre>
45+
<MultiSelect
46+
options={options}
47+
selected={selected}
48+
onChange={setSelected}
49+
labelledBy={"Select"}
50+
/>
51+
</div>
52+
);
53+
};
54+
55+
export default App;
56+
```
57+
58+
## 👀 Props
59+
60+
| Prop | Description | Type | Default |
61+
| --------------------- | --------------------------------- | ------------------ | ------- |
62+
| `labelledBy` | value for `aria-labelledby` | `string` | |
63+
| `options` | options for dropdown | `[{label, value}]` | |
64+
| `selected` | pre-selected rows | `[value]` | `[]` |
65+
| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` |
66+
| `isLoading` | show spinner on select | `boolean` | `false` |
67+
| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` |
68+
| `overrideStrings` | Override default strings for i18n | `object` | |
69+
| `onChange` | onChhange callback | `function` | |
70+
| `disabled` | disable dropdown | `boolean` | `false` |
71+
| `selectAllLabel` | _select all_ label | `string` | |
72+
| `disableSearch` | hide search textbox | `boolean` | `false` |
73+
| `filterOptions` | custom filter options | `function` | |
74+
| `theme` | theme variables | `object` | |
75+
76+
## 🌐 Internationalization
77+
78+
You can override the strings to be whatever you want, including translations for your languages.
79+
80+
```json
81+
{
82+
"selectSomeItems": "Select...",
83+
"allItemsAreSelected": "All items are selected.",
84+
"selectAll": "Select All",
85+
"search": "Search"
86+
}
87+
```
88+
89+
## 💅 Themeing
90+
91+
You can override theme variables to change colors
92+
93+
```json
94+
{
95+
"primary": "#4285F4",
96+
"hover": "#f1f3f5",
97+
"border": "#ccc",
98+
"gray": "#aaa",
99+
"background": "#fff",
100+
"borderRadius": "4px",
101+
"height": "38px"
102+
}
103+
```
104+
105+
## 🤠 Credits
106+
107+
- This project gets inspiration and several pieces of logical code from [react-multiple-select](https://github.com/Khan/react-multi-select/)
108+
- [TypeScript](https://github.com/microsoft/typescript)
109+
- [Rollup](https://github.com/rollup/rollup)
110+
- [Emotion](https://github.com/emotion-js/emotion)
111+
112+
## 📜 License
113+
114+
MIT &copy; [harshzalavadiya](https://github.com/harshzalavadiya)

‎package.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "react-multi-select-component",
3+
"version": "1.0.0",
4+
"description": "Simple multiple selection dropdown component with checkboxes, search and select-al`",
5+
"author": "harshzalavadiya",
6+
"license": "MIT",
7+
"repository": "harshzalavadiya/react-multi-select-component",
8+
"main": "dist/index.js",
9+
"module": "dist/index.es.js",
10+
"jsnext:main": "dist/index.es.js",
11+
"engines": {
12+
"node": ">=8",
13+
"npm": ">=5"
14+
},
15+
"scripts": {
16+
"build": "rollup -c",
17+
"start": "rollup -c -w"
18+
},
19+
"dependencies": {
20+
"@emotion/core": "^10.0.22",
21+
"@emotion/styled": "^10.0.23",
22+
"@rooks/use-outside-click": "^3.4.1",
23+
"emotion-theming": "^10.0.19"
24+
},
25+
"peerDependencies": {
26+
"react": "^16.12.0",
27+
"react-dom": "^16.12.0"
28+
},
29+
"devDependencies": {
30+
"@types/react": "^16.9.13",
31+
"@types/react-dom": "^16.9.4",
32+
"babel-core": "^6.26.3",
33+
"babel-runtime": "^6.26.0",
34+
"react": "^16.4.1",
35+
"react-dom": "^16.4.1",
36+
"react-scripts-ts": "^3.1.0",
37+
"rollup": "^1.27.5",
38+
"rollup-plugin-babel": "^4.3.3",
39+
"rollup-plugin-commonjs": "^10.1.0",
40+
"rollup-plugin-node-resolve": "^5.2.0",
41+
"rollup-plugin-peer-deps-external": "^2.2.0",
42+
"rollup-plugin-postcss": "^2.0.3",
43+
"rollup-plugin-typescript2": "^0.25.2",
44+
"rollup-plugin-url": "^3.0.1",
45+
"typescript": "^3.7.2"
46+
},
47+
"files": [
48+
"dist"
49+
]
50+
}

‎preview.gif

51.9 KB
Loading

‎rollup.config.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import commonjs from "rollup-plugin-commonjs";
2+
import resolve from "rollup-plugin-node-resolve";
3+
import external from "rollup-plugin-peer-deps-external";
4+
import postcss from "rollup-plugin-postcss";
5+
import typescript from "rollup-plugin-typescript2";
6+
import url from "rollup-plugin-url";
7+
8+
import pkg from "./package.json";
9+
10+
export default {
11+
input: "src/index.tsx",
12+
output: [
13+
{
14+
file: pkg.main,
15+
format: "cjs",
16+
exports: "named",
17+
sourcemap: true
18+
},
19+
{
20+
file: pkg.module,
21+
format: "es",
22+
exports: "named",
23+
sourcemap: true
24+
}
25+
],
26+
plugins: [
27+
external(),
28+
postcss({
29+
modules: true
30+
}),
31+
url(),
32+
resolve(),
33+
typescript({
34+
rollupCommonJSResolveHack: true,
35+
clean: true
36+
}),
37+
commonjs()
38+
]
39+
};

‎src/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import MultiSelect from "./multi-select";
2+
import Dropdown from "./multi-select/dropdown";
3+
import SelectPanel from "./select-panel";
4+
import SelectItem from "./select-panel/select-item";
5+
6+
export default MultiSelect;
7+
export { Dropdown, SelectPanel, SelectItem };

‎src/lib/constants.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ITheme } from "./interfaces";
2+
3+
export const defaultTheme: ITheme = {
4+
primary: "#4285F4",
5+
hover: "#f1f3f5",
6+
border: "#ccc",
7+
gray: "#aaa",
8+
background: "#fff",
9+
borderRadius: "4px",
10+
height: "38px"
11+
};

0 commit comments

Comments
 (0)