@nteract/dropdown-menu NPM

@nteract/dropdown-menu

This package contains a React component for rendering the drop-down element on a single cell. This drop-down provides users with the ability to hide and show cells, convert cells between different types, and more.

Installation

$ yarn add @nteract/dropdown-menu

$ npm install --save @nteract/dropdown-menu

Usage

The example below showcases how we can use the components within this package to create a drop-down menu with actions specific to code cells.

import {
  DropdownMenu,
  DropdownTrigger,
  DropdownContent
} from "@nteract/dropdown-menu";

export default () => {
  return (
    <DropdownMenu>
      <DropdownTrigger>
        <button title="show additional actions">
          <span className="octicon toggle-menu">
            <ChevronDownOcticon />
          </span>
        </button>
      </DropdownTrigger>
      {type === "code" ? (
        <DropdownContent>
          <li
            onClick={this.props.clearOutputs}
            className="clearOutput"
            role="option"
            aria-selected="false"
            tabIndex="0"
          >
            <a>Clear Cell Output</a>
          </li>
          <li
            onClick={this.props.toggleCellInputVisibility}
            className="inputVisibility"
            role="option"
            aria-selected="false"
            tabIndex="0"
          >
            <a>Toggle Input Visibility</a>
          </li>
        </DropdownContent>
      ) : null}
    </DropdownMenu>
  );
};

Documentation

We're working on adding more documentation for this component. Stay tuned by watching this repository!

Support

If you experience an issue while using this package or have a feature request, please file an issue on the issue board and add the pkg:dropdown-menu label.