Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

overlay

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
84
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
19 KB
1 contributor
Use overlay in your project ?
Copied
npm i @bit/react-bootstrap.react-bootstrap.overlay
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
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';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
container
custom | function

A component instance, DOM node, or function that returns either. The container element will have the Overlay appended to it via a React portal.

target
custom | function

A component instance, DOM node, or function that returns either. The overlay will be positioned in relation to the target

show
boolfalse

Set the visibility of the Overlay

popperConfig
object

A set of popper options and props passed directly to react-popper’s Popper component.

rootClose
boolfalse

Specify whether the overlay should trigger onHide when the user clicks outside the overlay

rootCloseEvent
'click' | 'mousedown'

Specify event for triggering a “root close” toggle.

onHide
function

A callback invoked by the overlay when it wishes to be hidden. Required if rootClose is specified.

transition
bool | customFade

Animate the entering and exiting of the Ovelay. true will use the <Fade> transition, or a custom react-transition-group <Transition> component can be provided.

onEnter
function

Callback fired before the Overlay transitions in

onEntering
function

Callback fired as the Overlay begins to transition in

onEntered
function

Callback fired after the Overlay finishes transitioning in

onExit
function

Callback fired right before the Overlay transitions out

onExiting
function

Callback fired as the Overlay begins to transition out

onExited
function

Callback fired after the Overlay finishes transitioning out

placement
'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start''top'

The placement of the OVerlay in relation to it’s target.