react-cascading-menu
Version:
React-Cascading-Menu is a multi-selectable cascading menu component for React, providing horizontal navigation and global search for efficient option selection.
117 lines (101 loc) • 3.42 kB
Markdown
**Cascading Menu** is a multi-selectable cascading menu component for React. It enhances user experience and navigation efficiency with the following features:
- **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.
1. Layout Mode/Orientation
2. Visual Hierarchy and Context Clarity
3. Tag-Based Navigation and Deletion
4. Interactive Selection and Deletion
5. Search Capability
6. Multi/Single-Select Flexibility at Each Level
7. Maintains Selection Order
8. Theme Customization Options
```sh
npm install react-cascading-menu
```
```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 (
<div>
<ReactCascadingMenu
ref={ref}
menuGroup={menuGroup}
selectedItems={preSelectedItems}
isMultiSelection={true}
displayValue="label"
width="70%"
height="400px"
theme="light"
/>
</div>
);
};
export default App;
```
```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",
},
],
},
],
},
],
},
],
};
```
