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) => <li>{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>> & ReactNodeThe target button, text, svg etc.. of the Dropdown.
contentReactNodeDefault value displayed in the Dropdown.
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.
dataTeststringAdd a data-test tag for automated tests.