use-dark-mode-hook: A Simple Library To Add Dark Mode to Your React Project
Tags: showdev, webdev, react
Published: 2021-03-05 20:32:25

_This article was originally posted on [my personal blog](https://blog.shahednasser.com/use-dark-mode-hook-a-simple-library/)_

I have created a new library called [use-dark-mode-hook](https://www.npmjs.com/package/use-dark-mode-hook). It's a simple library that allows you to easily add dark mode to your React projects.

This library provides a custom hook `useDarkMode` and a button toggler component `DarkModeToggler`. You can use them together or separately. However, this library does not provide any styling regarding dark and light modes. You have to do that yourself.

---

## Purpose

As I was trying to add Dark mode in my react project, I noticed that there are packages out there that do provide this, however, either they don't work with the latest React version or they only provide the functionality or UI. Thus, I decided to create a simple hook that adds the dark mode functionality to the website, and a component that provides a toggling button.

---

## Installation

To install the package:

```
npm i use-dark-mode-hook
```

---

## Usage

### useDarkMode + DarkModeToggler

To use both the functionality and UI (more details about the options of each in below sections):

```js
import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook'

function MyComponent () {
    const [isDarkMode, toggleDarkMode] = useDarkMode()

    return (
        <DarkModeToggler 
            isDarkMode={isDarkMode} 
            toggleDarkMode={toggleDarkMode}
            buttonClassName="some-classes"
        />
    )
}
```

That's it! `useDarkMode` will manage the state and logic while `DarkModeToggler` provides a toggle button for the user to toggle dark mode.

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f6e0rtf9qdq32o4pyb0.gif)

By default, `useDarkMode` will apply either `dark` or `light` class to the body of the document based on the choice of the user. You can change the names of the classes by passing `darkModeClass` and `lightModeClass` to `useDarkMode`, and change the element the class will be applied to by passing its selector in element to `useDarkMode`. You can check out all the options here.

### useDarkMode hook

You can use the hook separately with your own toggler:

```js
import useDarkMode from 'use-dark-mode-hook'

function myComponent (props) {
    const [isDarkMode, toggleDarkMode] = useDarkMode()

    //do something with it
}
```

You'll have to use `isDarkMode` as the current state of dark mode, and `toggleDarkMode` to toggle dark mode. `toggleDarkMode` takes a boolean specifying whether dark mode is enabled or disabled.

### DarkModeToggler

You can use the toggler separately with your own logic:

```js
import { DarkModeToggler } from 'use-dark-mode-hook'

function MyComponent () {
    //some code

    function toggleDarkMode (checked) {
        //logic to toggle dark mode
    }

    return (
        <DarkModeToggler isDarkMode={value} toggleDarkMode={toggleDarkMode} />
    )
}
```

For `isDarkMode` you have to pass the current value of whether dark mode is enabled or not, and for `toggleDarkMode` it should be a function that takes a boolean for whether dark mode is enabled or not.

---

## Contribution

If you find any issues or bugs or would like to contribute to this library, please check out the [GitHub repository](https://github.com/shahednasser/use-dark-mode-hook).

_You can connect with me by following me on twitter on [@shahednasserr](https://twitter.com/shahednasserr)_