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)

Prop Description Default value Range
zIndex set the z-index property of the dimmer 100 all numbers
opacity set the opacity in precentage 0.5 0 - 1
blur set the background's blur 0 0 - infinity
saturate set the background's saturation 100 0 - 100
transition set the speed of the dimmer appearens in seconds 0.3 0 - infinity

More Info

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