A custom React Hook to help you implement a "dark mode" component.

Last update: Aug 1, 2022

use-dark-mode

A custom React Hook to help you implement a "dark mode" component for your application. The user setting persists to localStorage.

❤️ it? ⭐️ it on GitHub or Tweet about it.

npm version Build Status All Contributors Tweet

usedarkmode-small

useDarkMode works in one of two ways:

  1. By toggling a CSS class on whatever element you specify (defaults to document.body). You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.

    body.light-mode {
      background-color: #fff;
      color: #333;
      transition: background-color 0.3s ease;
    }
    body.dark-mode {
      background-color: #1a1919;
      color: #999;
    }
  2. If you don't use global classes, you can specify an onChange handler and take care of the implementation of switching to dark mode yourself.

New in Version 2.x

  • useDarkMode now persists between sessions. It stores the user setting in localStorage.

  • It shares dark mode state with all other useDarkMode components on the page.

  • It shares dark mode state with all other tabs/browser windows.

  • The initial dark mode is queried from the system. Note: this requires a browser that supports the prefers-color-scheme: dark media query (currently Chrome, Firefox, Safari and Edge) and a system that supports dark mode, such as macOS Mojave.

  • Changing the system dark mode state will also change the state of useDarkMode (i.e, change to light mode in the system will change to light mode in your app).

  • Support for Server Side Rendering (SSR) in version 2.2 and above.

Requirement

To use use-dark-mode, you must use [email protected] or greater which includes Hooks.

Installation

$ npm i use-dark-mode

Usage

const darkMode = useDarkMode(initialState, darkModeConfig);

Parameters

You pass useDarkMode an initialState (a boolean specifying whether it should be in dark mode by default) and an optional darkModeConfig object. The configuration object may contain the following keys.

Key Description
classNameDark The class to apply. Default = dark-mode.
classNameLight The class to apply. Default = light-mode.
element The element to apply the class name. Default = document.body.
onChange A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a useEffect). If you specify onChange then classNameDark, classNameLight, and element are ignored (i.e. no classes are automatically placed on the DOM). You have full control!
storageKey A string that will be used by the storageProvider to persist the dark mode value. If you specify a value of null, nothing will be persisted. Default = darkMode.
storageProvider A storage provider. Default = localStorage. You will generally never need to change this value.

Return object

A darkMode object is returned with the following properties.

Key Description
value A boolean containing the current state of dark mode.
enable() A function that allows you to set dark mode to true.
disable() A function that allows you to set dark mode to false.
toggle() A function that allows you to toggle dark mode.

Note that because the methods don't require any parameters, you can call them direcly from an onClick handler from a button, for example (i.e., no lambda function is required).

Example

Here is a simple component that uses useDarkMode to provide a dark mode toggle control. If dark mode is selected, the CSS class dark-mode is applied to document.body and is removed when de-selected.

import React from 'react';
import useDarkMode from 'use-dark-mode';

import Toggle from './Toggle';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.disable}></button>
      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}></button>
    </div>
  );
};

export default DarkModeToggle;

That flash!

If your CSS is setup to default to light mode, but the user selects dark mode, the next time they visit your app, they will be in dark mode. However, the user will see a flash of light mode before the app is spun up and useDarkMode is called.

To prevent this, I've included some vanilla JavaScript that you can insert in your index.html just after the <body> tag. It is in a file named noflash.js.txt. You can either insert the contents of this file in a <script> tag or automate the step in your build process.

Note that if you change any of the default—such as storageKey or classNameDark for example—the noflash.js file will need to be modified with the same values.

Gatsby

Gatsby users may leverage gatsby-plugin-use-dark-mode to inject noflash.js for you.

Next.js

For next.js uses copy the noflash.js.txt to your public folder (public/noflash.js) and then create a _document.js and include the script before <Main />.

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <script src="noflash.js" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Sample Apps

Here is a list of apps build with use-dark-mode. If you have an app you would like to include on this list, open a PR.

License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):


Donavon West

🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻

Revel Carlberg West

🤔

Mateusz Burzyński

💻

Justin Hall

💻

Jeremy

📓 🐛

Janosh Riebesell

📖

Andrew Lisowski

📖

Jorge Gonzalez

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

GitHub

https://github.com/donavon/use-dark-mode
Comments
  • 1. webpack build error: document is not defined

    I am planning to add dark mode for my website and import this package, it works in development but when building it throws an error: document is not defined. I tried to pass the optioalConfigObject but still get the error.

    Reviewed by jeremygoccc at 2019-02-09 15:44
  • 2. Could not resolve dependency

    Reviewed by voxvici at 2021-03-02 09:31
  • 3. Invalid initialValue will crash app even after a valid value is provided

    I can get this to work nicely in Chrome and Chromium-based browsers, but it seems use-persisted-state is having an issue with Firefox and crashing the entire app.

    SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
    get
    node_modules/use-persisted-state/dist/use-persisted-state.m.js:29
    
      26 | return {
      27 |   get: function (n, e) {
      28 |     var r = t.getItem(n);
    > 29 |     return null === r ? "function" == typeof e ? e() : e : JSON.parse(r);
         | ^  30 |   },
      31 |   set: function (n, e) {
      32 |     t.setItem(n, JSON.stringify(e));
    
    ./node_modules/use-persisted-state/dist/use-persisted-state.m.js/</__webpack_exports__.default/</</s<
    node_modules/use-persisted-state/dist/use-persisted-state.m.js:43
    
      40 |     f = o.set,
      41 |     l = e(null),
      42 |     s = t(function () {
    > 43 |   return a(i, u);
         | ^  44 | }),
      45 |     v = s[0],
      46 |     g = s[1];
    
    Reviewed by cvburgess at 2019-10-27 00:02
  • 4. Flashing with styled-components

    I am using styled-components and use-dark-mode with default config, both the plugin and the hook itself. When dark mode is enabled and I refresh the page I still get colors flashing.

    I have a Layout.tsx component that includes:

    const GlobalStyles = createGlobalStyle`
        body {
            transition: all 0.5s linear;
    
            &.dark-mode {
              background-color: #1f1f1f;
              color: #dfe6e9;
            }
    
            &.light-mode {
              background-color: #ecf0f1;
              color: #1f1f1f;
            }
        }
    `
    

    which is then included in the layout component:

    export const Layout = ({ children }) => {
        <div>
            <GlobalStyles />
            {children}
        </div>
    }
    
    Reviewed by talohana at 2020-10-02 08:35
  • 5. Dark mode preference doesn't apply when using "Auto" system preference

    This hooks is great, I've recently implemented it on my site https://brianlovin.com. I've noticed that if I want the dark mode setting to be entirely based on the user's OS (e.g. I don't include a toggle on the page), that things break if the user is using the automatic dark mode setting on their OS.

    Bug:

    • set your macOS / iOS preferences to turn on dark mode at sunset, off at sunrise
    • open any app (or my site) before sunset - you should see day mode
    • open again after sunset - you will still see day mode

    I'm wondering if there could be a refetchUserPreference method or something that is exposed from the hook which I could run in my own code in an effect or just on-mount that would help people who visit the site between OS setting switches.

    Reviewed by brianlovin at 2019-12-06 14:04
  • 6. Bump tar from 4.4.8 to 4.4.15

    Bumps tar from 4.4.8 to 4.4.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-03 20:37
  • 7. Bump handlebars from 4.5.1 to 4.7.6

    Bumps handlebars from 4.5.1 to 4.7.6.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    Commits
    Maintainer changes

    This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-09-06 05:09
  • 8. Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-07-16 16:07
  • 9. Loosing dark mode when switching pages

    Thanks for this nice component!

    I followed the example in the Readme and it its working on my Gatsby site within one page. However, when I switch pages, dark mode is not persisted.

    I think the problem may be that my toggle component is regenerated on every page switch. But shouldn't the current value be read from localStorage?

    Could you please give some guidance?

    Reviewed by styxlab at 2020-03-26 15:51
  • 10. React version in peerDependencies

    Do you think we can expand the React version in peerDependencies? 16.8.1 is out, for example. Maybe ^16.8.0 as the hooks used should be stable and follow semver now? Not sure exactly what would be best.

    Reviewed by wKovacs64 at 2019-02-10 17:12
  • 11. Not support 17 version of react

    Reviewed by umidjon-2231 at 2021-12-14 13:09
  • 12. Bump async from 2.6.1 to 2.6.4

    Bumps async from 2.6.1 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 18:50
  • 13. Is it maintained?

    Is this project still maintained? The last publish was 3 years ago and the peer dependencies are failing with the version 17+ of React.

    Are you looking for new maintainers or to give the projet to other developers?

    Average time to resolve an issue

    Average time to resolve an issue

    Percentage of issues still open

    Percentage of issues still open

    Reviewed by arsnl at 2022-03-02 00:28
  • 14. Bump ajv from 6.7.0 to 6.12.6

    Bumps ajv from 6.7.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    v6.10.2

    Fix: the unknown keywords were ignored with the option strictKeywords: true (instead of failing compilation) in some sub-schemas (e.g. anyOf), when the sub-schema didn't have known keywords.

    v6.10.1

    Fix types Fix addSchema (#1001) Update dependencies

    v6.10.0

    Option strictDefaults to report ignored defaults (#957, @​not-an-aardvark) Option strictKeywords to report unknown keywords (#781)

    v6.9.0

    OpenAPI keyword nullable can be any boolean (and not only true). Custom keyword definition changes:

    • dependencies option in to require the presence of keywords in the same schema.

    ... (truncated)

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 14:51
  • 15. [Snyk] Upgrade use-persisted-state from 0.3.0 to 0.3.3

    Snyk has created this PR to upgrade use-persisted-state from 0.3.0 to 0.3.3.

    merge advice :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.


    • The recommended version is 3 versions ahead of your current version.
    • The recommended version was released a year ago, on 2020-11-19.
    Release notes
    Package name: use-persisted-state
    • 0.3.3 - 2020-11-19
    • 0.3.2 - 2020-11-19
    • 0.3.1 - 2020-11-19
    • 0.3.0 - 2019-02-11
    from use-persisted-state GitHub release notes
    Commit messages
    Package name: use-persisted-state
    • 2a33963 bump version to 0.3.3
    • f59141c make rules of hooks happy
    • 663a2cf tighten up getProvider check
    • bb5ac38 add rules of hooks eslint
    • da929e2 bump to version 0.3.2
    • 2a8bc89 use Node 14 for Travis
    • b50cbcf bump to version 0.3.1
    • c7d1bcb bunch of overdue fixes
    • 3cee199 docs: add vitordino as a contributor (#45)
    • 49451ac fix(provider): test-check if each provider exists (#24)
    • 97b0d2e docs: add mungojam as a contributor (#44)
    • 20038d0 Persist state as soon as requested (#19)
    • bb234e0 docs: add Fridus as a contributor (#43)
    • 33712bd CreateStorage: fix parsing undefined value (#20)
    • ab14a83 docs: add dennismorello as a contributor (#40)
    • e7aee5a chore(peer-deps): added [email protected]^17.0.0 as a peer dependency (#38)
    • beb9458 docs: add dispix as a contributor (#17)
    • 8c107dc Don't parse storage untracked event values (#15)
    • 02a847a docs: add karol-majewski as a contributor (#6)

    Compare


    Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

    For more information:

    🧐 View latest project report

    🛠 Adjust upgrade PR settings

    🔕 Ignore this dependency or unsubscribe from future upgrade PRs

    Reviewed by snyk-bot at 2022-01-17 13:04
  • 16. [Snyk] Upgrade @use-it/event-listener from 0.1.2 to 0.1.7

    Snyk has created this PR to upgrade @use-it/event-listener from 0.1.2 to 0.1.7.

    merge advice :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.


    • The recommended version is 5 versions ahead of your current version.
    • The recommended version was released 2 months ago, on 2021-11-15.
    Release notes
    Package name: @use-it/event-listener from @use-it/event-listener GitHub release notes
    Commit messages
    Package name: @use-it/event-listener
    • 0f2e772 suppoer react >=16.8
    • 46471cd Support React 17 as a peer dependency (#37)
    • df0c60c use Node 14 for Travis builds
    • 43d647e bump version to 0.1.6
    • 498a9f5 update dependencies
    • 557a3bd add once to readme
    • ddf9248 bump version to 0.1.5
    • 58879da update to @ testing-library/jest-dom
    • 2a4cbc6 linting
    • 86762e2 update dependencies
    • b8de12e add once to options, don’t use memo
    • b3470f7 docs: add pruge as a contributor (#34)
    • 026a7d2 add memoOptions to removeEventListener (#33)
    • 1a0d58b bump version to 0.1.4
    • a105d33 docs: add huan086 as a contributor (#26)
    • a62cc61 docs: add normanrz as a contributor (#25)
    • d988b9a docs: add bvanderdrift as a contributor (#22)
    • 2cba3ec options argument and TypeScript improvements (#23)
    • 115faf1 Merge pull request #32 from donavon/dependabot/npm_and_yarn/lodash-4.17.19
    • e8e0d58 Bump lodash from 4.17.15 to 4.17.19
    • d387446 Merge pull request #24 from donavon/dependabot/npm_and_yarn/acorn-5.7.4
    • 4e76137 Bump acorn from 5.7.3 to 5.7.4
    • ba0c958 Merge pull request #15 from bvanderdrift/develop
    • 0021a93 Merge pull request #21 from donavon/dependabot/npm_and_yarn/lodash-4.17.15

    Compare


    Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

    For more information:

    🧐 View latest project report

    🛠 Adjust upgrade PR settings

    🔕 Ignore this dependency or unsubscribe from future upgrade PRs

    Reviewed by snyk-bot at 2022-01-17 13:04
  • 17. `global` variable in browser context is always undefined. I think you meant `globalThis`

    https://github.com/donavon/use-dark-mode/blob/29590271bb3a74f08975181c5ed68bd5a210ef83/src/initialize.js#L15

    The global variable will only exist in node during ssr. globalThis === window in browsers and globalThis === global in node

    Reviewed by cpakken at 2021-11-24 07:09
React Hook which tells you when you've scrolled to bottom

use-scroll-to-bottom React Hook which tells you when you've scrolled to bottom Uses IntersectionObserver so make sure you can support it. Install npm

Jul 23, 2022
React Hooks to implement Undo and Redo functionality
React Hooks to implement Undo and Redo functionality

♻️ use-undo undo/redo functionality with React Hooks. Installation yarn add use-undo Usage import React from 'react'; import ReactDOM from 'react-dom'

Aug 5, 2022
A small package of custom React hooks that are useful for debugging changes in React hook dependencies across renders

use-debugger-hooks This is a package of custom React hooks that are useful for debugging dependency changes between renders. Most act as drop in repla

Jul 13, 2022
A custom React Hook for implementing a calendar with events
A custom React Hook for implementing a calendar with events

react-use-calendar Custom React Hook for implementing a calendar with events Installation npm install react-use-calendar --save Demo Usage import Rea

Jul 19, 2022
Jun 9, 2022
A custom React hook for synchronized state

React State Sync - a custom hook for synchronizing state Create synchronized state instances, then use them throughout your app. Opt into localStorage

Dec 1, 2021
📠 React custom hook for persist state management
📠 React custom hook for persist state management

Little State Machine State management made super simple ✨ Features Tiny with 0 dependency and simple (715B gzip) Persist state by default (sessionStor

Aug 2, 2022
A React custom hook to make tooltips

useTooltip useTooltip is a React hook to easily create tooltip in your React components. Install @seracio/tooltip has 2 peer dependencies that need to

Jul 10, 2022
A React custom-hook for creating flexible and accessible expand/collapse components.

A custom hook for creating accessible expand/collapse components in React. Animates the height using CSS transitions from 0 to auto.

Aug 6, 2022
A Custom React Hook to persist a state even after refreshing the page.
A Custom React Hook to persist a state even after refreshing the page.

A custom hook that persists a state even after refreshing the page. It returns two values just like the standard useState, but has one more argument needed.

Apr 5, 2022
React hook for managing a custom keypad

keypad-react React hook for managing keypad state (with decimal support). Requirements API Development Requirements Note that the Keypad formatting re

Mar 11, 2022
UseRequest: Simple custom hook for handling requests

useRequest Simple custom hook for handling requests With npm: npm install --save

Jan 11, 2022
Keep-react-hook-form - A lib to store react-hook-form values in session storage

Keep-react-hook-form - A lib to store react-hook-form values in session storage

Jan 27, 2022
useFormless allow you to control forms in React using react-hook approach

useFormless react-useformless is a simple library that allows you to control forms with react-hooks approach Why useFormless? Works with nested forms

Jul 10, 2022
☯️ React hook to determine if you are on the server, browser, or react native
☯️ React hook to determine if you are on the server, browser, or react native

useSSR ☯️ React hook to determine if you are on the server, browser, or react native Need to know when you're on the server, in the browser or in reac

Jul 16, 2022
A react hook which lets you automatically synchronize a value to a server with react-query

useReactQueryAutoSync A helpful react hook for building interfaces which require autosave. Read more about the motivation and design in the original b

Jul 20, 2022
r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber
r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber

r3f-spline r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber. ?? Spline is a friendly 3d collaborative design tool

Jul 25, 2022
An experimental hook that lets you have multiple components using multiple synced states using no context provider

Resynced (experimental) ❤️ Motivation This is an experimental hook that lets you have multiple components using multiple synced states using no contex

May 9, 2021
A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate

A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate! This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.

Aug 3, 2022