@hig/dropdown

HIG Dropdown

Stats

StarsIssuesVersionUpdatedCreatedSize
@hig/dropdown
1422542.4.117 days ago3 years agoMinified + gzip package size for @hig/dropdown in KB

Readme

Dropdown

Dropdowns provide a menu to select one or many from a list of more than 4 items.

Read more about when and how to use the Dropdown component on the website.

Getting started

Install the package

yarn add @hig/dropdown @hig/theme-context @hig/theme-data

Import the component

import Dropdown from "@hig/dropdown";

Basic usage

<Dropdown
  placeholder="placeholder for regular Uncontrolled dropdown"
  options={["Foo", "Bar"]}
/>

Styling

Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Dropdown also has a stylesheet prop that accepts a function wherein you can modify Dropdown's styles. The original styles, props, and current theme data will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance

function customStylesheet(styles, props, themeData) {
  return {
    ...styles,
    dropdownWrapper: {
      ...styles.dropdownWrapper,
      position: "absolute"
    },
    inputWrapper: {
      ...styles.inputWrapper,
      borderColor: props.variant === "box"
        ? themeData["basics.colors.secondary.green.100"]
        : themeData["basics.colors.secondary.darkBlue.100"]
    },
    caret: {
      ...styles.caret,
      cursor: "default"
    },
    menu: {
      ...styles.menu,
      backgroundColor: themeData["colorScheme.reference.accent"]
    },
    option: {
      ...styles.option,
      padding: "0 12px"
    }
  };
}

<Dropdown stylesheet={customStylesheet} options={["Foo", "Bar"]}>
  bar
</Dropdown>

Using render props for additional customization

Render Option

When a function is provided to props.renderOption, it will be given a payload containing:

  • option {object || string}
    • the string or object from props.options
  • props {object}
    • object that can be used as props to retain some of the Dropdown functionality in the custom rendered menu option. It contains the following properties:
      • aria-selected {boolean}
      • disabled {boolean}
      • highlighted {boolean}
      • id {string}
      • key {string}
      • onClick {function(MouseEvent)}
      • onMouseDown {function(MouseEvent)}
      • onMouseMove {function(MouseEvent)}
      • role {string}
      • selected {boolean}
<Dropdown
  placeholder="Select a theme",
  options={[
    {item: "HIG Light Theme", disabled: true}, 
    {item: "HIG Dark Blue Theme"}, 
    {item: "Matrix Theme"}
  ]}
  renderOption={(option, props) => {
    return(
      <div
        aria-selected={props["aria-selected"]}
        id={props.id}
        onClick={props.onClick}
        onMouseDown={props.onMouseDown}
        onMouseMove={props.onMouseMove}
        disabled={props.disabled}
        selected={props.selected}
        role={props.role}
        key={props.key}
      >
        <strong>{option.item}</strong>
      </div>
    );
  }}
/>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.