Dropdown
Displays a sub-element overlaid and renders the content
Version 2.0.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 |