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 |