JSPM – react-cascading-menu@1.0.8

Package Exports

react-cascading-menu
react-cascading-menu/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cascading-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cascading Menu is a multi-selectable cascading menu component for React. It enhances user experience and navigation efficiency with the following features:

Features

Visual Hierarchy and Context Clarity
Tag-Based Navigation and Deletion
Interactive Selection and Deletion
Search Capability
Multi/Single-Select Flexibility at Each Level
Maintains Selection Order
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

Untitled-video-Made-with-Clipchamp-_5_

Installation

npm install react-cascading-menu

Example Usage

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;

Data Example

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",
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

react-cascading-menu