Use-backdrop NPM

React Hooks API for quickly displaying customizable full-screen backdrops/overlays.

Think of use-backdrop as alert(), but native to React, and endlessly customizable!

use-backdrop is ready for production apps 😘

gif of use-backdrop

Install

npm install --save use-backdrop

Usage

🎉 A no-fuss example that uses use-backdrop to display a modal is available on GitHub. 🎉

Step 1: Wrap BackdropProvider around your root (App) component

import { BackdropProvider } from 'use-backdrop';
 
return (
  <BackdropProvider>
    <div className="App">
      { /* The rest of your app. */ }
    </div>
  </BackdropProvider>
)

Step 2: Import and call the useBackdrop hook

import { useBackdrop } from 'use-backdrop';
 
export default function MyComponent() {
  const { displayBackdrop, closeBackdrop } = useBackdrop();
}

Step 3: Call displayBackdrop, passing in a render function

export default function MyComponent() {
  const { displayBackdrop } = useBackdrop();
 
  const handleClick = () => displayBackdrop((closeBackdrop) => (
    <div>
      <button onClick={closeBackdrop}>
        Click me to close the backdrop.
      </button>
    </div>
  ));
 
  return (
    <div>
      <button onClick={handleClick}>
        Click me to display a backdrop.
      </button>
    </div>
  )
}

BackdropProvider props & options

BackdropProvider.propTypes = {
  children: PropTypes.element,

  // zIndex of the backdrop surface. Unused if backdropSurface is
  // overridden.
  zIndex: PropTypes.number,

  // If true, backdrop background is transparent.
  disableDarken: PropTypes.bool,

  // A render function: (children) => (/* React Component */)
  // that returns a Component that overrides (takes the place of)
  // the default darkened div background.
  //
  // See /example/src/ExampleApp.jsx for proper use.
  backdropSurface: PropTypes.func
}

BackdropProvider.defaultProps = {
  children: null,
  disableBackdrop: false,
  zIndex: 10,
  backdropSurface: null
}