JSPM – use-backdrop@1.0.12

Package Exports

use-backdrop

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-backdrop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
}

use-backdrop