Dropdown Component Module

Dropdown Component is a react component that creates a dropdown menu using many of material design guide styles.

demogif

Installation

You can install it using yarn:

yarn add @redwallsolutions/dropdown-component-module

Or using npm:

npm i @redwallsolutions/dropdown-component-module

Props

items

Iitems[]

required

visible

Boolean | undefined

origin

String | undefined

theme

Itheme | undefined

appearance

"default" | "primary" | "secondary" | undefined

Usage

Dropdown Component is very easy to use:

Dropdown Visibility

() => {
  const [visible, setVisible] = useState(true)
  return (
    <div style={{ width: 134, height: 250 }}>
      <label htmlFor="visibility">Dropdown Visibility</label>
      <input
        type="checkbox"
        onChange={() => {
          setVisible(!visible)
        }}
        checked={visible}
        style={{ marginBottom: '50px' }}
      />
      <Dropdown
        visible={visible}
        items={[
          { text: 'Awesome Option' },
          { text: 'Second Thing' },
          { text: 'I ❤️ Redwall' },
        ]}
      />
    </div>
  )
}

() => {
  const [visible, setVisible] = useState(true)
  return (
    <div style={{ width: 134, height: 250 }}>
      <label htmlFor="visibility">Dropdown Visibility</label>
      <input
        type="checkbox"
        onChange={() => {
          setVisible(!visible)
        }}
        checked={visible}
        style={{ marginBottom: '50px' }}
      />
      <Dropdown
        visible={visible}
        items={[
          { text: 'Awesome Option' },
          { text: 'Second Thing' },
          { text: 'I ❤️ Redwall' },
        ]}
      />
    </div>
  )
}

Dark Mode

It supports dark mode by passing the mode attribute from theme object. Take a look:

<div style={{ width: 280, height: 139 }}>
  <Dropdown
    theme={{ mode: 'dark' }}
    visible={true}
    items={[
      { text: 'Another Option' },
      { text: "I'm a nice option" },
      { text: 'VERY LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG' },
    ]}
  />
</div>

<div style={{ width: 280, height: 139 }}>
  <Dropdown
    theme={{ mode: 'dark' }}
    visible={true}
    items={[
      { text: 'Another Option' },
      { text: "I'm a nice option" },
      { text: 'VERY LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG' },
    ]}
  />
</div>

Origin

Dropdown also supports a origin prop. It's a representation of the transform-origin css prop.

In this example, we passed a center as origin prop value.