https://github.com/smitpatel1010/multi-select-tree
Multi Select Tree Dropdown
https://github.com/smitpatel1010/multi-select-tree
component javascript multi-select react react-component reactjs select typescript
Last synced: 18 days ago
JSON representation
Multi Select Tree Dropdown
- Host: GitHub
- URL: https://github.com/smitpatel1010/multi-select-tree
- Owner: smitpatel1010
- License: mit
- Created: 2020-11-14T16:56:55.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-13T13:15:27.000Z (over 5 years ago)
- Last Synced: 2025-03-24T21:01:50.447Z (about 1 year ago)
- Topics: component, javascript, multi-select, react, react-component, reactjs, select, typescript
- Language: TypeScript
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Multi Select Tree
[](//badge.fury.io/js/multi-select-tree)
## Install
```bash
npm install multi-select-tree
# or
yarn add multi-select-tree
```
## Example
```jsx
import React from 'react';
import MultiSelectTree from 'multi-select-tree';
const data = [
{ value: 'bike', label: 'Bike', children: [{ value: 'ducati_diavel', label: 'Ducati Diavel' }] },
{
value: 'cars',
label: 'Cars',
children: [
{
value: 'lamborghini',
label: 'Lamborghini',
children: [
{ value: 'lamborghini_aventador', label: 'Lamborghini Aventador' },
{ value: 'lamborghin_huracan', label: 'Lamborghini Huracan' },
],
},
{
value: 'ferrari',
label: 'Ferrari',
children: [
{ value: 'ferrari_portofino', label: 'Ferrari Portofino' },
{ value: 'ferrari_roma', label: 'Ferrari Roma' },
],
},
],
},
];
const App = () => {
return (
{
console.log(selectedOptions);
}}
initialState={[{ value: 'ferrari_portofino', label: 'Ferrari Portofino' }]}
/>
);
};
export default App;
```
## Props
| Name | Type | Description | Default |
| :------------- | :----------------------------------- | :------------------------------------------ | :------------ |
| `data` | `Array` | Options in tree form | `[]` |
| `label` | `string` | Label for the multiSelect | - |
| `placeholder` | `string` | Placeholder for multiSelect | `"Select..."` |
| `onChange` | `((selectedOptions: Array) => void)` | Callback invoked when user changes input. | `() => {}` |
| `initialState` | `Array` | Initial selected options | `[]` |
| `disabled` | `boolean` | If `true`, the multiSelect will be disabled | `false` |
## Imports
You can import below variables from `multi-select-tree`
- `MultiSelectTree` Component
- Only for `typescript` users
- `DataInterface` Type interface of data
- `SelectedOptionsInterface` Type Interface of selected options
```jsx
import MultiSelectTree, { DataInterface, SelectedOptionsInterface } from 'multi-select-tree';
```
## License
This project is licensed under the MIT License - Copyright (c) 2020 `Smit Patel`