JSPM – use-backdrop@1.0.7

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

gif of use-backdrop

Install

npm install --save use-backdrop

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>
  )
}

use-backdrop