use-backdrop
v1.0.12
Published
React Hooks API for quickly displaying full-screen backdrops/overlays
Downloads
14
Maintainers
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 😘
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