@dotconnor/grommet
Version:
focus on the essential experience
215 lines (152 loc) • 3.09 kB
Markdown
## Drop
A container that is overlaid next to a target.
[](https://storybook.grommet.io/?selectedKind=Controls-Drop&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/drop&module=%2Fsrc%2FDrop.js)
## Usage
```javascript
import { Drop } from 'grommet';
<Drop target={reference}>...</Drop>
```
## Properties
**align**
How to align the drop with respect to the target element. Not
specifying a vertical or horizontal alignment will cause it to be
aligned in the center. Defaults to `{
"top": "top",
"left": "left"
}`.
```
{
top:
top
bottom,
bottom:
top
bottom,
right:
left
right,
left:
left
right
}
```
**onClickOutside**
Function that will be invoked when the user clicks outside the drop.
```
function
```
**onEsc**
Function that will be called when the user presses the escape key inside
the drop.
```
function
```
**overflow**
How to control the overflow inside the drop. Defaults to `auto`.
```
auto
hidden
scroll
visible
{
horizontal:
auto
hidden
scroll
visible,
vertical:
auto
hidden
scroll
visible
}
string
```
**responsive**
Whether to dynamically re-place when resized. Defaults to `true`.
```
boolean
```
**restrictFocus**
Whether the drop should control focus.
```
boolean
```
**stretch**
If set to true the drop element will be stretched to at least match the
width of the target element. If set to align the width of the drop element
will be restricted to the width of the target element. The default is true
because that is what most uses of Drop want, like Select and Menu. Defaults to `true`.
```
boolean
align
```
**target**
Required. Target where the drop will be aligned to. This should be a React
reference.
```
object
```
**elevation**
Elevated height of the target, indicated via a drop shadow.
Only applicable if the Drop isn't plain.
```
none
xsmall
small
medium
large
xlarge
string
```
**plain**
Whether the drop element should have no background nor elevation.
```
boolean
```
**trapFocus**
Traps keyboard focus inside of drop. Defaults to `true`.
```
boolean
```
## Intrinsic element
```
div
```
## Theme
**drop.maxHeight**
The max height of the Drop container. Expects `string`.
Defaults to
```
undefined
```
**global.drop.background**
The background color of Drop. Expects `string | { dark: string, light: string }`.
Defaults to
```
#ffffff
```
**global.drop.border.radius**
The border radius of the Drop container. Expects `string`.
Defaults to
```
0px
```
**global.drop.extend**
Any additional style for Drop. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**global.drop.shadowSize**
Elevated height of the Drop. Expects `string`.
Defaults to
```
small
```
**global.drop.zIndex**
The stack order of the Drop. Expects `number`.
Defaults to
```
20
```