Skip to content

nteract/dropdown-menu

Folders and files

NameName
Last commit message
Last commit date
Mar 12, 2020
Jul 24, 2020
Mar 12, 2020
Mar 12, 2020
Mar 12, 2020
Mar 12, 2020
Jul 24, 2020
Jul 24, 2020
Mar 12, 2020
Mar 12, 2020

Repository files navigation

@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.

License

BSD-3-Clause