<Dropdown> Component

<Dropdown> is a non-visual context menu container with dynamic visibility (show/hide) in sliding fashion.
You need to place <YourComponent> inside the <Dropdown> in order to make the appearance.

<Dropdown> is similar to <Collapse> with additional handling of esc key and blur event to close itself. Once closed, the <Dropdown> restores the focus to the previously focused element.

<Dropdown> also handles tab key to switch focus only for the focusable elements inside <YourComponent>.

Here the demo:

Preview

Installing <Dropdown> Component

There are 2 ways to install <Dropdown> component into your react app project:

  • Install the Specific Package of <Dropdown> Component
  • Install the Whole Reusable-UI Component Pack, including the <Dropdown> Component

Defines the Dropdown-ed UI

The <Dropdown> should have one child to be dropdown-ed. The child shoud be a native DOM element or functional/class component that implements <Generic>'s props.

<Dropdown>
    <YourComponent />
</Dropdown>

expanded Property

Expands/Collapses the <Dropdown>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

<Dropdown expanded={true}> 

Show code

onExpandedChange Property

Sets a callback function to be called when the user closes the <Dropdown>.

The callback function parameters:

  • event: ExpandedChangeEvent

orientation Property

Sets the orientation of the <Dropdown>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview

Show code

lazy Property

Determines whenever the <Dropdown>'s children should be rendered or not when the <Dropdown expanded={false}>.

The possible values are:

  • undefined
  • false
  • true

Floating Properties

Determines how the <Dropdown> should be floating on the target DOM reference.

floatingOn Property

Determines the target DOM reference where the <Dropdown> should be floating on.
If not set (undefined), the <Dropdown> becomes a normal element flow.

Here the preview:

Preview

Show code

floatingPlacement Property

Determines the location where the <Dropdown> should be floating on the target DOM reference.

Here the preview:

floatingPlacement='top'

floatingStrategy Property

Determines the technical strategy how the <Dropdown> can float.
In most cases, you should not worry about the detail mechanism how the <Dropdown> can float.

The possible values are:

  • undefined
  • 'absolute'
  • 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <Dropdown> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

floatingAutoShift Property

Automatically shifts the floatingPlacement to nearest safe position when the <Dropdown> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

floatingOffset Property

The distance (in pixel) between the <Dropdown> and the target DOM reference.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Dropdown floatingOffset={0}>

Show code

floatingShift Property

The distance (in pixel) between the <Dropdown> and the default floatingPlacement location.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Dropdown floatingShift={0}>

Show code

onFloatingUpdate Property

Sets a callback function to be called when the <Dropdown> updates the position relative to the target DOM reference.

The callback function parameters:

  • event: FloatingPosition

Variables

There are several variables of <Dropdown> you can customize. Changing the variables affects all <Dropdown> instance and other components that depend on <Dropdown>.

Here the exposed variables:

  • Appearances

The example of accessing, modifying, & adding variables:

Show code