Skip to main content

Dropdown: React

An overlay list of options, which are hidden by default but can be shown by interacting with a button or other component.

OverviewReactSwiftKotlin

Installation​

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { Dropdown, DropdownItem } from '@mediahuis/chameleon-react';

export default function Example() {
  const anchorRef = React.useRef(null);

  return (
    <>
    <Button ref={anchorRef}>Click here to open</Button>
    <Dropdown anchorRef={anchorRef}>
      <DropdownItem>
    <Dropdown/>
    </>
  );
}
PropertyTypeDefaultRequiredDescription
anchorRefRefObject-YesReference to the element which you want to use for positioning of the dropdown.
childrenReactNode-NoThe children of the Dropdown component.
defaultOpenBooleanfalseNoDetermines the visibility state of the dropdown by default.
idString-YesSets the native HTML id attribute. It will also affect the describedby-id for accessibility reasons.
placementPlacement'bottom-start'NoDetermines where the Dropdown is positioned towards the target element.
PropertyTypeDefaultRequiredDescription
clickableBooleantrueNoDetermines if clickable styles are added when set to true.
iconRightElementType-NoControls the `as` prop of the Icon on the right side.
titleReactNode-YesThe text inside the DropdownItem.

Controlling the Dropdown Programmatically​

The Dropdown component provides methods that let you control it from a parent component using a ref. This is useful when you need to programmatically open, close, or toggle the dropdown.

When you create a ref to the Dropdown component, you get access to three methods:

  • toggle(): Switches the dropdown between open and closed states
  • open(): Opens the dropdown
  • close(): Closes the dropdown

Usage example​

function ParentComponent() {
  const dropdownRef = useRef(null);

  const handleButtonClick = () => {
    // You can call any of the exposed methods
    dropdownRef.current.toggle();
    // Or dropdownRef.current.open();
    // Or dropdownRef.current.close();
  };

  return (
    <>
      <Button onClick={handleButtonClick}>Toggle Dropdown</Button>
      <Dropdown ref={dropdownRef} anchorRef={buttonRef}>
        {/* Dropdown content */}
      </Dropdown>
    </>
  );
}