Igloo branding

Dropdown

Displays a sub-element overlaid and renders the content

Installation

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

npm install @igloo-ui/dropdown

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/dropdown

Usage

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

import Dropdown from '@igloo-ui/dropdown';
import Button from '@igloo-ui/button';

const [show, setShow] = React.useState(false);

function List() {
  const listItem = items.map((item, key) => (
    <li key={`list-item_${key}`}>{item}</li>
  ));
  return <ul>{listItem}</ul>;
}

<Dropdown isOpen={show} onClose={() => setShow(false)} content={<List />}>
  <Button appearance="secondary" size="small" onClick={() => setShow(!show)}>
    Settings
  </Button>
</Dropdown>;

API

PropTypeDescription
childrenReactElement<any, string | JSXElementConstructor<any>>The target button, text, svg etc.. of the Dropdown
classNamestringAdd a specific class to the dropdown
contentReactNodeDefault value displayed in the Dropdown.
disablePortalbooleanDisables the component from appending the dropdown to the end of the body using ReactPortal
positionPositionPosition of the Dropdown
sizeSizeChanges the size of the card, giving it more or less padding
isOpenbooleanTrue if the Dropdown list is displayed
onClose() => voidCallback when the user clicks outside the Dropdown.
onAfterClose() => voidCallback when the Dropdown is closed and animations are done
dataTeststringAdd a data-test tag for automated tests
roleRoleThe role of the dropdown for aria purposes
renderReference(props: HTMLProps<HTMLButtonElement>) => ReactElement<any, string | JSXElementConstructor<any>>Render the reference element to be able to add the reference props directly. This overrides children
isReferenceWidthbooleanWhether or not the dropdown should take the width of the reference element
isScrollablebooleanWhether or not the dropdown should be scrollable
footerReactNodeThe footer content of the dropdown
onScrollEnd() => voidCallback when the user scrolls to the end of the Dropdown
scrollEndThresholdnumberThe threshold in pixels from the bottom of the dropdown to trigger the onScrollEnd callback
dropdownOffsetnumberThe offset of the dropdown from the reference