Action Menu

v.5.0.0

Installation

yarn

yarn add @mercell/action-menu-react

pnpm

pnpm add @mercell/action-menu-react

npm

npm install --save @mercell/action-menu-react

The ActionMenu has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/button-react": "^5.0.0",
"@mercell/icon-button-react": "^undefined",
"@mercell/tailwind": "^6.0.1",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Action Menu component is as simple as importing it like this. Which icons to use might change depending on your use.

import { ActionMenu } from '@mercell/action-menu-react';
import { Download32, TrashCan32 } from '@carbon/icons-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! render ( <ActionMenu id="ActionMenu" actions={[ { label: 'Download', handler: () => console.log('Clicked Download'), Icon: Download32, }, { label: 'Remove', handler: () => console.log('Clicked Remove'), Icon: TrashCan32, }, ]} /> )

// You can play with code, with HTML tags and text as much as you want!
    render (
        <ActionMenu
            id="ActionMenu"
            actions={[
                {
                    label: 'Download',
                    handler: () => console.log('Clicked Download'),
                    Icon: Download32,
                },
                {
                    label: 'Remove',
                    handler: () => console.log('Clicked Remove'),
                    Icon: TrashCan32,
                },
            ]}
        />
    )

Result

Types, definitions, etc.

Types

ActionMenuProps

interface ActionMenuProps {
    actions: Action[];
    label?: string;
    id: string;
} & JSX.IntrinsicElements['ul']

Name	Type	Default	Required	Description
actions	Array	-	yes	Array of Action
label	string		no	Label
id	string		yes	Id for the Action Menu

Action

interface Action {
    label: string;
    handler: () => void;
    Icon: CarbonIconType;
    className?: string;
}

Name	Type	Default	Required	Description
label	string	-	yes	Label for the button
handler	function	-	yes	Function for the buttons onClick
Icon	CarbonIconType	-	yes	Icon for the button
className	string		no	Additional classes

Changelog

Change Log - @mercell/action-menu-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

5.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

4.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

3.0.7

Tue, 12 Jul 2022 10:42:52 GMT

Patches

• Adjustment of component to use new version of outsideClickHook

3.0.6

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

3.0.5

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.4

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.3

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.2

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Move dependencies to peerDependencies to avoid duplication in installation process in project
• Adding the same peerDependencies to devDependencies

3.0.1

Fri, 21 Jan 2022 12:06:38 GMT

Patches

• Changed bg- variables

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.0.10

Fri, 17 Sep 2021 13:18:16 GMT

Patches

• Fix for outside click hook
• Fix for outside click hook

1.0.9

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.8

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.7

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.6

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.5

Wed, 24 Feb 2021 11:34:29 GMT

Version update only

1.0.4

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.3

Wed, 17 Feb 2021 11:56:13 GMT

Patches

• Exporting named

1.0.2

Tue, 09 Feb 2021 09:25:03 GMT

Patches

• bump

1.0.1

Fri, 05 Feb 2021 09:50:54 GMT

Patches

• target es5

1.0.0

Thu, 04 Feb 2021 14:55:03 GMT

Breaking changes

• Adding component

Figma

Nothing here as of now