https://github.com/codebrahma/react-multi-level-selector
React component for Multi level options Selector for your application
https://github.com/codebrahma/react-multi-level-selector
Last synced: 7 months ago
JSON representation
React component for Multi level options Selector for your application
- Host: GitHub
- URL: https://github.com/codebrahma/react-multi-level-selector
- Owner: Codebrahma
- Created: 2019-10-21T10:02:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T23:42:29.000Z (about 3 years ago)
- Last Synced: 2024-11-22T09:38:17.381Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-multi-level-selector.netlify.com/
- Size: 815 KB
- Stars: 13
- Watchers: 4
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-multi-level-selector
:bell: React component for Multi level options Selector for your application.
## Installation
```bash
npm install --save react-multi-level-selector
```
## Usage
```Javascript
import React from 'react';
import MultiLevelSelect from 'react-multi-level-selector';
const options = [
{ value: 'fruits', label: 'Fruits',
options: [
{ value: 'citrus', label: 'Citrus',
options: [
{ value: 'orange', label: 'Orange' },
{ value: 'grapefruits', label: 'GrapeFruits'},
],
},
{ value: 'tropical', label: 'Tropical',
options: [
{ value: 'mango', label: 'Mango' },
{ value: 'papaya', label: 'Papaya' },
],
},
{ value: 'berries', label: 'Berries',
options: [
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'raspberries', label: 'Raspberries' },
],
},
],
},
{ value: 'city', label: 'City',
options: [
{ value: 'dublin', label: 'Dublin' },
{ value: 'new york', label: 'New York' },
{ value: 'san fransis', label: 'San Fransis' },
],
},
function App() {
return (
This is a test application
)
}
export default App;
```
## Props
| Name | Type | Description |
| ----------------- | ------------ | ----------------------------------------------------------------------- |
| **`options`** | `{Array}` | Options for the dropdown. Specify the options for users to select from. |
| **`placeholder`** | `{String}` | The text displayed when no option is selected. |
| **`onChange`** | `{function}` | Subscribe to change events. |
| **`className`** | `{String}` | className to style the selector |