Falcon UI

backdrop

Backdrop component is useful for handling "click outsite to close" functionality for modals, sidebars etc.

When visible (visible={true}) it renders as full viewport element with a semi-transparent background.

xxxxxxxxxx
 
import { Backdrop } from '@deity/falcon-ui';

 
<Toggle initial={false}>
  {({ on, toggle }) => (
    <React.Fragment>
      <Backdrop visible={on} onClick={toggle} />
      <Button onClick={toggle}>Show Backdrop</Button>
    </React.Fragment>
  )}
</Toggle>

Backdrop can also be rendered as a portal to avoid issues with elements nesting.

 
<Toggle initial={false}>
  {({ on, toggle }) => (
    <React.Fragment>
      <Backdrop as={Portal} visible={on} onClick={toggle} />
      <Button onClick={toggle}>Show Backdrop</Button>
    </React.Fragment>
  )}
</Toggle>

Backdrop specific props

Property	Type	Required	Default	Description
visible	boolean	🗸	false	if true backdrop is visible

Backdrop component accepts also all of the responsive, theme-based style props.