Quick nav

ActionMenu

This component is used to display a menu which will contain a list of menu options. The menu is dismissible if you click outside the dropdown.

Version 0.1.2

Installation

To install @igloo-ui/action-menu in your project, you will need to run the following command using npm:

npm install @igloo-ui/action-menu

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/action-menu

Usage

Then to use the component in your code just import it!

import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';

<ActionMenu
  options={[
    {
      label: 'Add Item',
      value: 'add',
    },
    {
      label: 'Delete Item',
      value: 'delete',
      disabled: true,
    },
    {
      label: 'Copy Item',
      value: 'copy',
    },
  ]}
  renderReference={(refProps) => {
    return (
      <Button appearance="secondary" {...refProps}>
        Button
      </Button>
    );
  }}
/>;

API

Prop	Type	Default	Description
`className`	string	-	Add a specific class to the action menu
`closeOnSelect`	boolean \| ((option: OptionType) => boolean)		Whether or not the action menu should close when an option is selected
`dataTest`	string	-	Add a data-test tag for automated tests
`isOpen`	boolean		Whether or not the action menu should be open by default
`onMenuClose`	() => void	-	Callback when the action menu is closed
`onMenuOpen`	() => void	-	Callback when the action menu is opened
`onOptionSelect`	(option: OptionType) => void	-	Callback when an option is selected
`options`	ActionMenuOption[]	-	A list of options to display in the action menu
`position`	Position		Position of the action menu
`renderReference`	(props: HTMLProps<HTMLButtonElement>) => ReactElement<any, string \| JSXElementConstructor<any>>	-	Render the reference element to be able to add the reference props directly