Dropdown Menu

v.6.0.0

Installation

yarn

yarn add @mercell/dropdown-menu-react

pnpm

pnpm add @mercell/dropdown-menu-react

npm

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

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

"@mercell/tailwind": "^6.0.1",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"classnames": "^2.3.1",
"react-popper": "^2.3.0""react": "^$17.0.2" `}

Usage

Using the Dropdown Menu component is as simple as importing it like this.

import { DropdownMenu, DropdownMenuItem } from '@mercell/dropdown-menu-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const DropDownMenuWrapper = () => { const [show, setShow] = React.useState(false); const buttonRef = React.useRef<HTMLButtonElement>(null); const toggleDropdown = () => setShow(currentState => !currentState); const chevronDownClassName = show ? 'hidden' : ''; const chevronUpClassName = show ? '' : 'hidden'; return ( <div className="relative"> <button role="button" ref={buttonRef} onClick={toggleDropdown} aria-haspopup="menu" aria-expanded={show} className="flex" > Dropdown me (I will state visible on click) <ChevronDown24 className={chevronDownClassName}/> <ChevronUp24 className={chevronUpClassName} /> </button> {show && ( <DropdownMenu id="Test" anchorRef={buttonRef} onClose={() => setShow(false)} > <DropdownMenuItem disabled>Disabled</DropdownMenuItem> <DropdownMenuItem>My profile</DropdownMenuItem> <DropdownMenuItem as="a" href="http://www.youtube.com" target="_blank"> Link to youtube </DropdownMenuItem> <DropdownMenuItem>Log out</DropdownMenuItem> </DropdownMenu> )} </div> ) } const DropDownMenuCloseOnClickWrapper = () => { const [show, setShow] = React.useState(false); const buttonRef = React.useRef<HTMLButtonElement>(null); const toggleDropdown = () => setShow(currentState => !currentState); const chevronDownClassName = show ? 'hidden' : ''; const chevronUpClassName = show ? '' : 'hidden'; return ( <div className="relative"> <button role="button" ref={buttonRef} onClick={toggleDropdown} aria-haspopup="menu" aria-expanded={show} className="flex" > Dropdown me <ChevronDown24 className={chevronDownClassName}/> <ChevronUp24 className={chevronUpClassName} /> </button> {show && ( <DropdownMenu id="Test" anchorRef={buttonRef} closeOnClick onClose={() => setShow(false)} > <DropdownMenuItem disabled>Disabled</DropdownMenuItem> <DropdownMenuItem>My profile</DropdownMenuItem> <DropdownMenuItem as="a" href="http://www.youtube.com" target="_blank"> Link to youtube </DropdownMenuItem> <DropdownMenuItem>Log out</DropdownMenuItem> </DropdownMenu> )} </div> ) } render( <div className="flex space-x-8"> <DropDownMenuWrapper/> <DropDownMenuCloseOnClickWrapper/> </div> )

// You can play with code, with HTML tags and text as much as you want!
const DropDownMenuWrapper = () => {
    const [show, setShow] = React.useState(false);
    const buttonRef = React.useRef<HTMLButtonElement>(null);
    const toggleDropdown = () => setShow(currentState => !currentState);
    const chevronDownClassName = show ? 'hidden' : '';
    const chevronUpClassName = show ? '' : 'hidden';
    return (
        <div className="relative">
            <button
                role="button"
                ref={buttonRef}
                onClick={toggleDropdown}
                aria-haspopup="menu"
                aria-expanded={show}
                className="flex"
            >
                Dropdown me (I will state visible on click) <ChevronDown24 className={chevronDownClassName}/> <ChevronUp24 className={chevronUpClassName} />
            </button>
            {show && (
                <DropdownMenu
                    id="Test"
                    anchorRef={buttonRef}
                    onClose={() => setShow(false)}
                >
                    <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
                    <DropdownMenuItem>My profile</DropdownMenuItem>
                    <DropdownMenuItem as="a" href="http://www.youtube.com" target="_blank">
                        Link to youtube
                    </DropdownMenuItem>
                    <DropdownMenuItem>Log out</DropdownMenuItem>
                </DropdownMenu>
            )}
        </div>
    )
}
const DropDownMenuCloseOnClickWrapper = () => {
   const [show, setShow] = React.useState(false);
    const buttonRef = React.useRef<HTMLButtonElement>(null);
    const toggleDropdown = () => setShow(currentState => !currentState);
    const chevronDownClassName = show ? 'hidden' : '';
    const chevronUpClassName = show ? '' : 'hidden';
    return (
        <div className="relative">
            <button
                role="button"
                ref={buttonRef}
                onClick={toggleDropdown}
                aria-haspopup="menu"
                aria-expanded={show}
                className="flex"
            >
                Dropdown me <ChevronDown24 className={chevronDownClassName}/> <ChevronUp24 className={chevronUpClassName} />
            </button>
            {show && (
                <DropdownMenu
                    id="Test"
                    anchorRef={buttonRef}
                    closeOnClick
                    onClose={() => setShow(false)}
                >
                    <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
                    <DropdownMenuItem>My profile</DropdownMenuItem>
                    <DropdownMenuItem as="a" href="http://www.youtube.com" target="_blank">
                        Link to youtube
                    </DropdownMenuItem>
                    <DropdownMenuItem>Log out</DropdownMenuItem>
                </DropdownMenu>
            )}
        </div>
    )
}
render(
    <div className="flex space-x-8">
        <DropDownMenuWrapper/>
        <DropDownMenuCloseOnClickWrapper/>
    </div>
)

Result

Types, definitions, etc.

Types

DropdownMenuProps

interface DropdownMenuProps {
    id: string;
    onClose: (evt: any) => void;
    anchorRef: RefObject<HTMLElement>;
    popperOptions?: PopperOptions;
    closeOnClick?: boolean;
} & JSX.IntrinsicElements['div']

Link to Popper Options type

Name	Type	Default	Required	Description
id	string	-	yes	Unique identifier
onClose	function	-	yes	What happens on close. Usually sets the show state to false
closeOnClick	boolean	-	no	If the menu should close on clicking
popperOptions	PopperOptions	-	no	All options allowed by PopperJS
anchorRef	RefObject<HTMLElement>	-	yes	The element to anchor the menu to

DropdownMenuItemProps

interface DropdownMenuProps<Element extends React.ElementType> {
    disabled?: boolean;
    as?: Element;
}

Name	Type	Default	Required	Description
disabled	boolean	-	no	Disable element
as	React.ElementType	'button'	no	Setting in DOM proper HTML Element and allowing only properties for it

Changelog

Change Log - @mercell/dropdown-menu-react

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

6.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

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

5.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

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

4.0.5

Thu, 01 Sep 2022 08:16:05 GMT

Patches

• left align text in the dropdown menu by default

4.0.4

Thu, 14 Jul 2022 13:28:46 GMT

Patches

• Updated hover state to remove sticky hover on mobile

4.0.3

Tue, 12 Jul 2022 10:42:52 GMT

Patches

• Adjustment of component to use new version of outsideClickHook

4.0.2

Tue, 05 Jul 2022 11:30:26 GMT

Patches

• adjusted the dropdown menu size, min width 160px and max width 250px

4.0.1

Thu, 30 Jun 2022 10:57:49 GMT

Patches

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

4.0.0

Tue, 03 May 2022 10:38:35 GMT

Breaking changes

• New component aligned with design

3.0.6

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.5

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.4

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.3

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

Fri, 21 Jan 2022 12:06:38 GMT

Patches

• Changed bg- variables

3.0.1

Wed, 05 Jan 2022 16:16:16 GMT

Patches

• use bg-base-default

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

Tue, 12 Oct 2021 11:37:45 GMT

Patches

• Updated background color and border width

1.0.10

Fri, 17 Sep 2021 13:18:16 GMT

Patches

• 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

Mon, 15 Mar 2021 15:44:58 GMT

Patches

• Added a closeOnClick property to allow closing dropdown when clicking inside it

1.0.4

Wed, 24 Feb 2021 11:34:29 GMT

Patches

• Default background set

1.0.3

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

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 DropdownMenu

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card