Backdrop

EBackdrop displays contextual and actionable content behind all other surfaces in an app. It will overlay your app with a dimmed layer. We have used EBackdrop component creating EModal and ECanvas elements.

Import

import EBackdrop from "@components/Elements/EBackdrop";

Usage

const BackdropExample = () => {
  const [isShown,setIsShown] = useState(false);

  const onBtnClick = () =>{
    setIsShown(true)
  }

  const onBackdropClick = () =>{
    setIsShown(false)
  }

  return (
    <Fragment>
      <EBtn onClick={onBtnClick}>
        Show backdrop
      </Btn>
      <EBackDrop status={isShown} onClick={onBackdropClick}/>
    </Fragment>
  );
};

export default BackdropExample;

Props

For EBackdrop component, the following props are available:

Prop	Type	Default	Note
portal	Boolean	true	Enables react portal.
blurEffect	Boolean	true	Applies background blur.
className	String	-	Overrides or extends the component's styles.
status	Boolean	false	Controls the visible/hidden status of backdrop.
color	String	"light_theme-100"	The given color is applied to the backdrop - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.