Backdrop

Implementation

import { Backdrop } from "slipstream-ui";

const Example = () => <Backdrop />;

Default

Click anywhere to close...

<Backdrop>...</Backdrop>

Duration

Speed up or slow down the transition with the duration attribute

Click anywhere to close...

<Backdrop duration="100">...</Backdrop>

Props

Attribute	Type	Value	Default Value	Description
isOpen	boolean	true/false		Triggers the visibility of the backdrop
toggle	function			Control open state in your parent component state when the backdrop is clicked
usePortal	boolean	true/false	false	Render component to the document body
zIndex	number	e.g. 9999	9999	Specify, if needed, the z-index of the backdrop component
duration	string/number	100/200/300/400/500 600/700/800/900/1000	500	Specify transition speed at which the backdrop enters and leaves
custom	boolean	true/false		Remove centering css logic for children elements