use-backdrop

    1.0.12 • Public • Published

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

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

    NPM JavaScript Style Guide

    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
    }

    License

    MIT © lyulka

    Install

    npm i use-backdrop

    DownloadsWeekly Downloads

    14

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    245 kB

    Total Files

    6

    Last publish

    Collaborators

    • adrioalimin