DropButton

How to get DropButton

import { DropButton } from 'fds/components';

Type: Component

Deprecated

This API has been deprecated.

A utility component which renders a specified button using a render function and automatically anchors a Drop next to it when the drop is opened. The rendered Drop and its corresponding contents can also be specified using a render function.

Keyboard behavior:

  • Escape: close the Drop

Props

# Name Type Description
1. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
2. [onClick] Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
3. [onDropToggled] Function

A callback that is called whenever the drop is toggled.


  Arguments
# Name Type Description
1. isDropOpened Boolean

Whether or not the Drop corresponding to the component is opened.

4. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

5. renderButton Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired button to be returned.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isDisabled Boolean

Whether or not the button should be rendered as disabled.

Whether or not the component should be rendered in a disabled state.

isDropOpened Boolean

Whether or not the drop is currently opened.

Whether or not the Drop corresponding to the component is opened.

isFocused FDS~IsFocused

Whether or not button is focused.

onFocusableRef Function

A callback that is called whenever the button's ref changes. Use this callback to get the ref (or the domNode) of the button so it can be focused when the DropButton is focused.

toggleDrop Function

Callback function which toggles the drop.

  Returns

Type: ReactElement

A valid ReactElement, generally a Button

6. renderDrop Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
closeDrop Function

Callback function which closes the drop.

Was this page helpful?