Dropdown
Displays a sub-element overlaid and renders the content
Version 1.9.2
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
Prop | Type | Default | Description |
---|---|---|---|
children | ReactElement<any, string | JSXElementConstructor<any>> | - | The target button, text, svg etc.. of the Dropdown |
className | string | - | Add a specific class to the dropdown |
content | ReactNode | - | Default value displayed in the Dropdown. |
disablePortal | boolean | Disables the component from appending the dropdown to the end of the body using ReactPortal | |
position | Position | Position of the Dropdown | |
size | Size | Changes the size of the card, giving it more or less padding | |
isOpen | boolean | True if the Dropdown list is displayed | |
onClose | () => void | - | Callback when the user clicks outside the Dropdown. |
onAfterClose | () => void | - | Callback when the Dropdown is closed and animations are done |
dataTest | string | - | Add a data-test tag for automated tests |
role | Role | The 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 |
isReferenceWidth | boolean | Whether or not the dropdown should take the width of the reference element | |
isScrollable | boolean | Whether or not the dropdown should be scrollable | |
footer | ReactNode | - | The footer content of the dropdown |
onScrollEnd | () => void | - | Callback when the user scrolls to the end of the Dropdown |
scrollEndThreshold | number | The threshold in pixels from the bottom of the dropdown to trigger the onScrollEnd callback | |
dropdownOffset | number | The offset of the dropdown from the reference |