Drop

Type: React component

How to get Drop?

JavaScript

import { Drop } from 'fds/components';

An arbitrary container for a drop. This component is generally used in one of the utility components which allow you to specify a "renderDrop" prop (e.g. DropButton or MenuItemWithDrop). It's possible to specify the maxWidth, minWidth and width of this component. When used inside of a positioner component, Drop sets the minWidth to the width of the reference element/point (the element which the positioner component is positioning next to) when positioning above or below this element.

Props

  1. children

    (Required)

    Type: ReactNode

  2. maxWidth

    (Optional)

    Type: Number | String

    The maximum width of the component, sets the CSS "max-width" property.

    Default value

  3. minWidth

    (Optional)

    Type: Number | String

    The minimum width of the component, sets the CSS "min-width" property.

    Default value

  4. onMouseEnter

    (Optional)

    Type: Function

    A callback that is called whenever the pointer is moved over the component. This callback is only fired when the pointer enters the component.

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

    Arguments

    Default value

  5. onMouseLeave

    (Optional)

    Type: Function

    A callback that is called whenever the pointer is moved off the component. This callback is only fired when the pointer leaves the component.

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

    Arguments

    Default value

  6. onRef

    (Optional)

    Type: 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

    Returns

    Default value

  7. width

    (Optional)

    Type: Number | String

    The width of the component, sets the CSS "width" property.

    Default value