react-dimmer

react-dimmer is an easy to use React component that allows you to dim your app's background while a menu / modal is open, in order to get the user's focus on it.

Usage

First, install as a npm package in your project:

npm i react-dimmer

Import the package from node_modules

import { ReactDimmer } from 'react-dimmer'

And finally use:

<ReactDimmer isOpen={isMenuOpen} exitDimmer={setMenuOpen} />

In order to use this correctly, use the useState hook:

const [isMenuOpen, setMenuOpen] = useState(false)

• isMenuOpen - a boolean that determines whether a menu / modal etc... is open
• setMenuOpen - a react setState function passed into ReactDimmer, in order to set the menu / modal close once the dimmer is clicked

Options

You can use these options to style the dimmer:

(all of the properties must be passed as numbers)

More Info

This package was easy to build thanks to TSDX, Check it out