Ninja Power Manifesto

    use-dark-mode-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.6 • Public • Published

    use-dark-mode-hook

    Small!

    A simple library to add dark mode functionality to your React projects!

    Demo

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

    By default, useDarkMode will apply either dark or light class to the body of the document based on the choice of the user.

    Contents

    Installation

    in your terminal:

    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):

    import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook'
    
    function MyComponent () {
        const [isDarkMode, toggleDarkMode] = useDarkMode()
    
        return (
            <DarkModeToggler 
                isDarkMode={isDarkMode} 
                toggleDarkMode={toggleDarkMode}
                buttonClassName="some-classes"
            />
        )
    }

    useDarkMode hook

    import useDarkMode from 'use-dark-mode-hook'
    
    function myComponent (props) {
        const [isDarkMode, toggleDarkMode] = useDarkMode()
    
        //do something with it
    }

    isDarkMode: boolean state for whether dark mode is chosen or not toggleDarkMode: function that takes boolean value for whether dark mode should be enabled or not. Use this to change the user's preference (dark or light mode).

    Options

    You can pass to useDarkMode the following options:

    Name Type Description Default
    initialValue boolean should it initially be dark false
    darkModeClass string the class that should be given when dark mode dark
    lightModeClass string the class that should be given when light mode light
    element string the selector of the element that the class should be applied to body
    debug boolean should debug messages be shown in the console false
    useDarkMode({
        initialValue: false,
        darkModeClass: 'dark',
        lightModeClass: 'light',
        element: 'body'
    })

    DarkModeToggler

    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} />
        )
    }

    If you use the button only for toggling dark mode, you need to pass it the following parameters:

    Options

    Name Type Description
    isDarkMode boolean Whether it's currently dark or light
    toggleDarkMode Function The function that will handle the change of login between dark
    and light mode. Takes boolean as parameter for whether dark is
    enabled or not.
    buttonClassName string(optional) custom class to assign to button

    Attribution

    Icons from Feather.


    License

    MIT

    Install

    npm i use-dark-mode-hook

    DownloadsWeekly Downloads

    15

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • shahednasser