Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinayv-456/react-cascading-menu
React-Cascading-Menu is a multi-selectable cascading menu component for React, providing horizontal navigation and global search for efficient option selection.
https://github.com/vinayv-456/react-cascading-menu
dsa reactjs-es6 recursion styled-components typescript webpack
Last synced: about 1 month ago
JSON representation
React-Cascading-Menu is a multi-selectable cascading menu component for React, providing horizontal navigation and global search for efficient option selection.
- Host: GitHub
- URL: https://github.com/vinayv-456/react-cascading-menu
- Owner: vinayv-456
- License: mit
- Created: 2024-03-03T03:14:02.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-10-03T05:31:15.000Z (about 1 month ago)
- Last Synced: 2024-10-03T06:53:04.813Z (about 1 month ago)
- Topics: dsa, reactjs-es6, recursion, styled-components, typescript, webpack
- Language: TypeScript
- Homepage: https://vinayv-456.github.io/react-cascading-menu/
- Size: 2.58 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Cascading Menu
**Cascading Menu** is a multi-selectable cascading menu component for React. It enhances user experience and navigation efficiency with the following features:
## Features
1. Visual Hierarchy and Context Clarity
2. Tag-Based Navigation and Deletion
3. Interactive Selection and Deletion
4. Search Capability
5. Multi/Single-Select Flexibility at Each Level
6. Maintains Selection Order
7. Theme Customization Options
- **Navigation Efficiency**: Searching and selecting options in traditional dependent dropdowns is difficult and time-consuming as the user needs to navigate through multiple dropdowns. Cascading Menu provides easy access to options through interactive selection or global search, making selection faster and more efficient.
- **Enhanced User Experience**: Understanding relationships between options in dependent dropdowns can be challenging. Cascading Menu provides a clear visual representation of the option hierarchy.
## Demo
### Installation
```sh
npm install react-cascading-menu
```
### Example Usage
```jsx
import React, { useRef } from "react";
import ReactCascadingMenu from "react-cascading-menu";
import { menuGroup, preSelectedItems } from "./data.js";
const App = () => {
const ref = useRef();
const fetchSelectionItemsLabels = () => {
console.log("get selections as label array", ref.current?.getAllItemsSelected());
};
const fetchSelectionItems = () => {
console.log("get selections", ref.current?.getSelection());
};
return (
);
};
export default App;
```
### Data Example
```jsx
const menuGroup = {
id: "1_101",
groupHeading: "Country",
options: [
{
id: "2_101",
label: "United States",
value: "United States",
groupHeading: "State",
options: [
{
id: "3_101",
label: "New York",
value: "New York",
groupHeading: "City",
options: [
{
id: "4_101",
label: "New York City",
value: "New York City",
groupHeading: "Place",
isMultiSelection: false,
options: [
{
id: "5_101",
label: "Statue of Liberty",
value: "Statue of Liberty",
},
{
id: "5_102",
label: "Central Park",
value: "Central Park",
},
{
id: "5_103",
label: "Empire State Building",
value: "Empire State Building",
},
],
},
],
},
],
},
],
};
```