overlay

v4.15.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

Overlay is essentially a wrapper around react-transition-group/Transition Learn more: https://reactcommunity.org/react-transition-group/

1 contributor

Install overlay as a package?

Copied

npm i @bit/segmentio.evergreen.overlay

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

Overlay is essentially a wrapper around react-transition-group/Transition Learn more: https://reactcommunity.org/react-transition-group/

Children can be a node or a function accepting close: func and state: ENTERING | ENTERED | EXITING | EXITED.

Show the component; triggers the enter or exit states.

Props to be passed through on the inner Box.

Whether or not to prevent body scrolling outside the context of the overlay

Boolean indicating if clicking the overlay should close the overlay.

Boolean indicating if pressing the esc key should close the overlay.

Function called when overlay is about to close. Return false to prevent the sheet from closing. type: Function -> Boolean

Callback fired before the “exiting” status is applied. type: Function(node: HtmlElement) -> void

Callback fired after the “exiting” status is applied. type: Function(node: HtmlElement) -> void

Callback fired after the “exited” status is applied. type: Function(exitState: Any?, node: HtmlElement) -> void

Callback fired before the “entering” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount.

type: Function(node: HtmlElement, isAppearing: bool) -> void

Callback fired after the “entering” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount.

type: Function(node: HtmlElement, isAppearing: bool) -> void

Callback fired after the “entered” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount.

type: Function(node: HtmlElement, isAppearing: bool) -> void

Theme provided by ThemeProvider.

Methods borrowed from BlueprintJS https://github.com/palantir/blueprint/blob/release/2.0.0/packages/core/src/components/overlay/overlay.tsx