🌓 A dark mode toggle component for React.

Last update: Jul 31, 2022

dark-mode-toggle Demo

dark-mode-toggle

A dark mode toggle component for React. Inspired by Tim Silva's Dark/Light Mode Toggle Switch Pattern A11y Dribbble shot.


Github CI Workflow Status NPM Version License


📖 Table of Contents

🚀 Getting Started

⚡️ Quick Start

npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled
{ setMode(mode); }} /> ); }">
import { useState } from 'react';
import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';

function Example() {
  const [mode, setMode] = useState('dark');
  return (
    <DarkModeToggle
      mode={mode}
      dark="Dark"
      light="Light"
      size="lg"
      inactiveTrackColor="#e2e8f0"
      inactiveTrackColorOnHover="#f8fafc"
      inactiveTrackColorOnActive="#cbd5e1"
      activeTrackColor="#334155"
      activeTrackColorOnHover="#1e293b"
      activeTrackColorOnActive="#0f172a"
      inactiveThumbColor="#1e293b"
      activeThumbColor="#e2e8f0"
      onChange={(mode) => {
        setMode(mode);
      }}
    />
  );
}

💻 Live Demo

Open in CodeSandbox

⚙️ Configuration

DarkModeToggle supports the following props:

Prop Type Default value Description
mode string dark The color scheme mode.
dark string undefined The dark mode label text.
light string undefined The light mode label text.
onChange Function undefined The callback invoked when the mode changes.
size string sm The size of the toggle switch (w/o labels). There are 3 available sizes:
  • sm — 48x28px
  • md — 72x42px
  • lg — 96x56px
N.B. If label(s) are used, their font size is going to scale proportionally to the toggle switch as follows:
  • sm — 12px
  • md — 18px
  • lg — 24px
inactiveLabelColor string #b9bdc1 The color of the label(s) when the toggle switch is in an inactive/off state.
inactiveLabelColorOnHover string #fcfefe The color of the label(s) on hover, when the toggle switch is in an inactive/off state.
inactiveLabelColorOnActive string #cdd1d5 The color of the label(s) on active, when the toggle switch is in an inactive/off state.
activeLabelColor string #5b5e62 The color of the label(s) when the toggle switch is in an active/on state.
activeLabelColorOnHover string #404346' The color of the label(s) on hover, when the toggle switch is in an active/on state.
activeLabelColorOnActive string #010101 The color of the label(s) on active, when the toggle switch is in an active/on state.
inactiveTrackColor string #dce0e3 The color of the track when the toggle switch is in an inactive/off state.
inactiveTrackColorOnHover string #fcfefe The color of the track on hover, when the toggle switch is in an inactive/off state.
inactiveTrackColorOnActive string #cdd1d5 The color of the track on active, when the toggle switch is in an inactive/off state.
activeTrackColor string #404346 The color of the track when the toggle switch is in an active/on state.
activeTrackColorOnHover string #2d2f31 The color of the track on hover, when the toggle switch is in an active/on state.
activeTrackColorOnActive string #141516 The color of the track on active, when the toggle switch is in an active/on state.
inactiveThumbColor string #2d2f31 The color of the thumb when the toggle switch is in an inactive/off state.
activeThumbColor string #dce0e3 The color of the thumb when the toggle switch is in an active/on state.
focusRingColor string rgb(59 130 246 / 0.5) The color of the toggle switch's focus ring.

♿️ Accessibility

In order to comply with the web accessibility standards, we must make use of the ariaLabel prop, like so:

; }">
function AccessibleExample() {
  return <DarkModeToggle ariaLabel="Toggle color scheme" />;
}

👨🏼‍⚖️ License

MIT

GitHub

https://github.com/anatoliygatt/dark-mode-toggle
Comments
  • 1. chore(deps-dev): bump @types/node from 17.0.43 to 18.6.1

    Bumps @types/node from 17.0.43 to 18.6.1.

    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)
    Reviewed by dependabot[bot] at 2022-07-25 23:40
  • 2. chore(deps-dev): bump eslint-plugin-jsx-a11y from 6.5.1 to 6.6.0

    Bumps eslint-plugin-jsx-a11y from 6.5.1 to 6.6.0.

    Release notes

    Sourced from eslint-plugin-jsx-a11y's releases.

    v6.6.0

    Full Changelog: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/compare/v6.5.1...v6.6.0

    Changelog

    Sourced from eslint-plugin-jsx-a11y's changelog.

    6.6.0 / 2022-06-23

    • 566011b [New] aria-role: add allowedInvalidRoles option (#828)
    • 64dcac6 [New] Introduce a plugin-wide setting for custom components. (#844)
    • ce2c328 [Fix] no-redundant-roles, role-supports-aria-props: Remove implicit role from dl element (#848)
    • fb20bc4 [Refactor] role-supports-aria-props: clean up the logic a bit
    • 1826628 [Refactor] reduce egregious use of array spread, in favor of [].concat idiom
    • 0f1615a [Docs] no-static-element-interactions: Update error message (#843)
    • 9980d1d [Docs] Add infrastructure for auto-generating markdown table and list (#837)
    • f878d3b [Docs] Update project readme (#831)
    • aea7671 [Deps] update @babel/runtime, array-includes, axe-core, jsx-ast-utils
    • d74173a [Deps] update jsx-ast-utils
    • f6ba03c [Deps] update @babel/runtime, jsx-ast-utils
    • 547dab4 [Deps] update @babel/runtime, axe-core, minimatch
    • baaf791 [Deps] update @babel/runtime, minimatch, semver
    • c015fef [Deps] update @babel/runtime, axe-core, damerau-levenshtein
    • 832cbd6 [meta] add export default instead of module.exports (#861)
    • ee933a2 [meta] Add CONTRIBUTING.md to solicit contributions (#846)
    • fa3c869 [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-transform-flow-strip-types, aud, eslint-plugin-eslint-plugin, eslint-plugin-flowtype, eslint-plugin-import
    • fb3d51e [Dev Deps] update @babel/core, @babel/register, eslint-plugin-import, minimist
    • 8c1df4d [Dev Deps] pin @technote-space/doctoc because v2.5 is a breaking change
    • fb071ab [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-transform-flow-strip-types, eslint-plugin-eslint-plugin
    • 5e966e5 [Dev Deps] update @babel/cli
    • f597f5b [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser
    • 287854a [Tests] Fix npm run flow (#856)
    • 112261c [Tests] skip fragment tests in eslint < 6
    • ea877c4 [Tests] img-redundant-alt-test: add passing tests (#832)
    • 685426d test: align usage of jest expect across tests (#827)
    • c460a8b [Tests] move invalid test case to valid; changed in axe-core v4.4
    Commits
    • cce3497 v6.6.0
    • 832cbd6 [meta] add export default instead of module.exports
    • 8c1df4d [Dev Deps] pin @technote-space/doctoc because v2.5 is a breaking change
    • aea7671 [Deps] update @babel/runtime, array-includes, axe-core, jsx-ast-utils
    • fb071ab [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, `@babe...
    • 287854a [Tests] Fix npm run flow
    • 112261c [Tests] skip fragment tests in eslint < 6
    • d74173a [Deps] update jsx-ast-utils
    • fb20bc4 [Refactor] role-supports-aria-props: clean up the logic a bit
    • ee933a2 [meta] Add CONTRIBUTING.md to solicit contributions
    • 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)
    Reviewed by dependabot[bot] at 2022-07-19 08:41
  • 3. chore(deps-dev): bump @types/node from 17.0.43 to 18.0.6

    Bumps @types/node from 17.0.43 to 18.0.6.

    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)
    Reviewed by dependabot[bot] at 2022-07-19 08:40
  • 4. chore(deps-dev): bump eslint-plugin-storybook from 0.5.12 to 0.6.1

    Bumps eslint-plugin-storybook from 0.5.12 to 0.6.1.

    Release notes

    Sourced from eslint-plugin-storybook's releases.

    v0.6.1

    🐛 Bug Fix

    • fix(no-uninstalled-addons): ignore local addons #98 (@​yannbf)

    Authors: 1

    v0.6.0

    🚀 Enhancement

    Authors: 2

    v0.5.13

    ⚠️ Pushed to main

    • docs(CONTRIBUTING): add more test instructions [skip-ci] (@​yannbf)

    Authors: 1

    Changelog

    Sourced from eslint-plugin-storybook's changelog.

    v0.6.1 (Tue Jul 12 2022)

    🐛 Bug Fix

    • fix(no-uninstalled-addons): ignore local addons #98 (@​yannbf)

    Authors: 1


    v0.6.0 (Sun Jul 10 2022)

    🚀 Enhancement

    Authors: 2


    v0.5.13 (Fri Jun 24 2022)

    ⚠️ Pushed to main

    • docs(CONTRIBUTING): add more test instructions [skip-ci] (@​yannbf)

    Authors: 1


    Commits
    • 9674a2c Bump version to: 0.6.1 [skip ci]
    • e016c0e Update CHANGELOG.md [skip ci]
    • 193c9b0 Merge pull request #98 from storybookjs/fix/ignore-local-addons
    • 29d633d fix(no-uninstalled-addons): ignore local addons
    • fa6290d docs(no-uninstalled-addons): switch tabs to spaces [skip ci]
    • d55971c Bump version to: 0.6.0 [skip ci]
    • 66cb3fb Update CHANGELOG.md [skip ci]
    • d1bb264 Merge pull request #96 from andrelas1/feat/no-uninstalled-addons
    • f2bae3a fix(no-uninstalled-addons): restrict rule to .storybook folder
    • 567e208 fix(no-uninstalled-addons): fix logic on addon names
    • 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)
    Reviewed by dependabot[bot] at 2022-07-19 08:39
  • 5. chore(deps-dev): bump eslint from 8.17.0 to 8.20.0

    Bumps eslint from 8.17.0 to 8.20.0.

    Release notes

    Sourced from eslint's releases.

    v8.20.0

    Features

    Bug Fixes

    • 30be0ed fix: no-warning-comments rule escapes special RegEx characters in terms (#16090) (Lachlan Hunt)
    • bfe5e88 fix: ignore spacing before ] and } in comma-spacing (#16113) (Milos Djermanovic)

    Documentation

    • 845c4f4 docs: Add website team details (#16115) (Nicholas C. Zakas)
    • 5a0dfdb docs: Link to blog post in no-constant-binary-expression (#16112) (Jordan Eldredge)
    • bc692a9 docs: remove install command (#16084) (Strek)
    • 49ca3f0 docs: don't show toc when content not found (#16095) (Amaresh S M)
    • ba19e3f docs: enhance 404 page UI (#16097) (Amaresh S M)
    • a75d3b4 docs: remove unused meta.docs.category field in working-with-rules page (#16109) (Brandon Scott)
    • cdc0206 docs: add formatters page edit link (#16094) (Amaresh S M)
    • 4d1ed22 docs: preselect default theme (#16098) (Strek)
    • 4b79612 docs: add missing correct/incorrect containers (#16087) (Milos Djermanovic)
    • 09f6acb docs: fix UI bug on rules index and details pages (#16082) (Deepshika S)
    • f5db264 docs: remove remaining duplicate rule descriptions (#16093) (Milos Djermanovic)
    • 32a6b2a docs: Add scroll behaviour smooth (#16056) (Amaresh S M)

    Chores

    • bbf8df4 chore: Mark autogenerated release blog post as draft (#16130) (Nicholas C. Zakas)
    • eee4306 chore: update internal lint dependencies (#16088) (Bryan Mishkin)
    • 9615a42 chore: update formatter examples template to avoid markdown lint error (#16085) (Milos Djermanovic)
    • 62541ed chore: fix markdown linting error (#16083) (唯然)

    v8.19.0

    Features

    • 7023628 feat: add importNames support for patterns in no-restricted-imports (#16059) (Brandon Scott)
    • 472c368 feat: fix handling of blockless with statements in indent rule (#16068) (Milos Djermanovic)

    Bug Fixes

    • fc81848 fix: throw helpful exception when rule has wrong return type (#16075) (Bryan Mishkin)

    Documentation

    • 3ae0574 docs: Remove duplicate rule descriptions (#16052) (Amaresh S M)
    • f50cf43 docs: Add base href to each page to fix relative URLs (#16046) (Nicholas C. Zakas)
    • ae4b449 docs: make logo link clickable on small width screens (#16058) (Milos Djermanovic)
    • 280f898 docs: use only fenced code blocks (#16044) (Milos Djermanovic)
    • f5d63b9 docs: add listener only if element exists (#16045) (Amaresh S M)
    • 8b639cc docs: add missing migrating-to-8.0.0 in the user guide (#16048) (唯然)
    • b8e68c1 docs: Update release process (#16036) (Nicholas C. Zakas)
    • 6d0cb11 docs: remove table of contents from markdown text (#15999) (Nitin Kumar)

    Chores

    • e884933 chore: use github-slugger for markdown anchors (#16067) (Strek)
    • 02e9cb0 chore: revamp carbon ad style (#16078) (Amaresh S M)
    • b6aee95 chore: remove unwanted comments from rules markdown (#16054) (Strek)

    ... (truncated)

    Changelog

    Sourced from eslint's changelog.

    v8.20.0 - July 16, 2022

    • bbf8df4 chore: Mark autogenerated release blog post as draft (#16130) (Nicholas C. Zakas)
    • 845c4f4 docs: Add website team details (#16115) (Nicholas C. Zakas)
    • 5a0dfdb docs: Link to blog post in no-constant-binary-expression (#16112) (Jordan Eldredge)
    • bc692a9 docs: remove install command (#16084) (Strek)
    • 30be0ed fix: no-warning-comments rule escapes special RegEx characters in terms (#16090) (Lachlan Hunt)
    • ca83178 feat: catch preprocess errors (#16105) (JounQin)
    • 49ca3f0 docs: don't show toc when content not found (#16095) (Amaresh S M)
    • ba19e3f docs: enhance 404 page UI (#16097) (Amaresh S M)
    • bfe5e88 fix: ignore spacing before ] and } in comma-spacing (#16113) (Milos Djermanovic)
    • a75d3b4 docs: remove unused meta.docs.category field in working-with-rules page (#16109) (Brandon Scott)
    • cdc0206 docs: add formatters page edit link (#16094) (Amaresh S M)
    • 4d1ed22 docs: preselect default theme (#16098) (Strek)
    • 4b79612 docs: add missing correct/incorrect containers (#16087) (Milos Djermanovic)
    • 09f6acb docs: fix UI bug on rules index and details pages (#16082) (Deepshika S)
    • f5db264 docs: remove remaining duplicate rule descriptions (#16093) (Milos Djermanovic)
    • 32a6b2a docs: Add scroll behaviour smooth (#16056) (Amaresh S M)
    • eee4306 chore: update internal lint dependencies (#16088) (Bryan Mishkin)
    • 9615a42 chore: update formatter examples template to avoid markdown lint error (#16085) (Milos Djermanovic)
    • 62541ed chore: fix markdown linting error (#16083) (唯然)

    v8.19.0 - July 1, 2022

    • 7023628 feat: add importNames support for patterns in no-restricted-imports (#16059) (Brandon Scott)
    • 472c368 feat: fix handling of blockless with statements in indent rule (#16068) (Milos Djermanovic)
    • fc81848 fix: throw helpful exception when rule has wrong return type (#16075) (Bryan Mishkin)
    • e884933 chore: use github-slugger for markdown anchors (#16067) (Strek)
    • 02e9cb0 chore: revamp carbon ad style (#16078) (Amaresh S M)
    • 3ae0574 docs: Remove duplicate rule descriptions (#16052) (Amaresh S M)
    • b6aee95 chore: remove unwanted comments from rules markdown (#16054) (Strek)
    • f50cf43 docs: Add base href to each page to fix relative URLs (#16046) (Nicholas C. Zakas)
    • 6840940 chore: correctly use .markdownlintignore in Makefile (#16060) (Bryan Mishkin)
    • ae4b449 docs: make logo link clickable on small width screens (#16058) (Milos Djermanovic)
    • 280f898 docs: use only fenced code blocks (#16044) (Milos Djermanovic)
    • f5d63b9 docs: add listener only if element exists (#16045) (Amaresh S M)
    • 8b639cc docs: add missing migrating-to-8.0.0 in the user guide (#16048) (唯然)
    • b8e68c1 docs: Update release process (#16036) (Nicholas C. Zakas)
    • 48904fb chore: add missing images (#16017) (Amaresh S M)
    • 910f741 chore: add architecture to nav (#16039) (Strek)
    • 9bb24c1 chore: add correct incorrect in all rules doc (#16021) (Deepshika S)
    • 5a96af8 chore: prepare versions data file (#16035) (Nicholas C. Zakas)
    • 50afe6f chore: Included githubactions in the dependabot config (#15985) (Naveen)
    • 6d0cb11 docs: remove table of contents from markdown text (#15999) (Nitin Kumar)
    • 473411e chore: add deploy workflow for playground (#16034) (Milos Djermanovic)
    • a30b66c chore: fix print style (#16025) (Amaresh S M)
    • f4dad59 chore: add noindex meta tag (#16016) (Milos Djermanovic)
    • db387a8 chore: fix sitemap (#16026) (Milos Djermanovic)
    • 285fbc5 chore: remove TOC from printable (#16020) (Strek)
    • 8e84c21 chore: remove ligatures from fonts (#16019) (Strek)

    ... (truncated)

    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)
    Reviewed by dependabot[bot] at 2022-07-19 08:39
  • 6. chore(deps-dev): bump @types/node from 17.0.43 to 18.6.3

    Bumps @types/node from 17.0.43 to 18.6.3.

    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)
    Reviewed by dependabot[bot] at 2022-07-31 07:17
  • 7. chore(deps-dev): bump eslint-plugin-react from 7.30.0 to 7.30.1

    Bumps eslint-plugin-react from 7.30.0 to 7.30.1.

    Release notes

    Sourced from eslint-plugin-react's releases.

    v7.30.1

    #1000: jsx-eslint/eslint-plugin-react#1000 #1002: jsx-eslint/eslint-plugin-react#1002 #1005: jsx-eslint/eslint-plugin-react#1005 #100: jsx-eslint/eslint-plugin-react#100 #1010: jsx-eslint/eslint-plugin-react#1010 #1013: jsx-eslint/eslint-plugin-react#1013 #1022: jsx-eslint/eslint-plugin-react#1022 #1029: jsx-eslint/eslint-plugin-react#1029 #102: jsx-eslint/eslint-plugin-react#102 #1034: jsx-eslint/eslint-plugin-react#1034 #1038: jsx-eslint/eslint-plugin-react#1038 #1041: jsx-eslint/eslint-plugin-react#1041 #1043: jsx-eslint/eslint-plugin-react#1043 #1046: jsx-eslint/eslint-plugin-react#1046 #1047: jsx-eslint/eslint-plugin-react#1047 #1050: jsx-eslint/eslint-plugin-react#1050 #1053: jsx-eslint/eslint-plugin-react#1053 #1057: jsx-eslint/eslint-plugin-react#1057 #105: jsx-eslint/eslint-plugin-react#105 #1061: jsx-eslint/eslint-plugin-react#1061 #1062: jsx-eslint/eslint-plugin-react#1062 #1070: jsx-eslint/eslint-plugin-react#1070 #1071: jsx-eslint/eslint-plugin-react#1071 #1073: jsx-eslint/eslint-plugin-react#1073 #1076: jsx-eslint/eslint-plugin-react#1076 #1079: jsx-eslint/eslint-plugin-react#1079 #1088: jsx-eslint/eslint-plugin-react#1088 #1098: jsx-eslint/eslint-plugin-react#1098 #1101: jsx-eslint/eslint-plugin-react#1101 #1103: jsx-eslint/eslint-plugin-react#1103 #110: jsx-eslint/eslint-plugin-react#110 #1116: jsx-eslint/eslint-plugin-react#1116 #1117: jsx-eslint/eslint-plugin-react#1117 #1119: jsx-eslint/eslint-plugin-react#1119 #1121: jsx-eslint/eslint-plugin-react#1121 #1122: jsx-eslint/eslint-plugin-react#1122 #1123: jsx-eslint/eslint-plugin-react#1123 #1130: jsx-eslint/eslint-plugin-react#1130 #1131: jsx-eslint/eslint-plugin-react#1131 #1132: jsx-eslint/eslint-plugin-react#1132 #1134: jsx-eslint/eslint-plugin-react#1134 #1135: jsx-eslint/eslint-plugin-react#1135 #1139: jsx-eslint/eslint-plugin-react#1139 #1148: jsx-eslint/eslint-plugin-react#1148 #1149: jsx-eslint/eslint-plugin-react#1149 #114: jsx-eslint/eslint-plugin-react#114 #1151: jsx-eslint/eslint-plugin-react#1151 #1155: jsx-eslint/eslint-plugin-react#1155

    ... (truncated)

    Changelog

    Sourced from eslint-plugin-react's changelog.

    7.30.1 - 2022.06.23

    Fixed

    • [display-name]: fix false positive for HOF returning only nulls (#3291[] @​golopot)
    • [jsx-no-leaked-render]: avoid unnecessary negation operators and ternary branches deletion (#3299[] @​Belco90)
    • [display-name]: fix false positive when using memo (#3304[] @​golopot)

    Changed

    #3304: jsx-eslint/eslint-plugin-react#3304 #3299: jsx-eslint/eslint-plugin-react#3299 #3294: jsx-eslint/eslint-plugin-react#3294 #3293: jsx-eslint/eslint-plugin-react#3293 #3291: jsx-eslint/eslint-plugin-react#3291

    Commits
    • 3348023 Update CHANGELOG and bump version
    • a73570f [Dev Deps] update @babel/core, @babel/eslint-parser, `eslint-remote-teste...
    • b9aa04b [Fix] display-name: fix false positive when using memo
    • e7fc22f [Fix] jsx-no-leaked-render: avoid unnecessary negation operators and ternar...
    • c42b624 [Docs] jsx-key: split the examples
    • 527db86 [Docs] jsx-tag-spacing: rename option from #3264
    • fc9664f [Fix] display-name: fix false positive for HOF returning only nulls
    • See full diff 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)
    Reviewed by dependabot[bot] at 2022-07-31 07:13
  • 8. chore(deps-dev): bump eslint-plugin-jsx-a11y from 6.5.1 to 6.6.1

    Bumps eslint-plugin-jsx-a11y from 6.5.1 to 6.6.1.

    Release notes

    Sourced from eslint-plugin-jsx-a11y's releases.

    v6.6.0

    Full Changelog: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/compare/v6.5.1...v6.6.0

    Changelog

    Sourced from eslint-plugin-jsx-a11y's changelog.

    6.6.1 / 2022-07-21

    • 38405ad [Fix] no-interactive-tabindex: allow role assignments using a ternary with literals on both sides
    • 7524e0c [Fix] no-static-element-interactions: allow role assignments using a ternary with literals on both sides (#865)
    • 1c06306 [readme] properly describe rule settings in builtin configs
    • 0c19f02 [Docs] no-noninteractive-tabindex, no-static-element-interactions: document allowExpressionValues (#870)
    • 2362832 [readme] added link to redirect eslint to relevant docs (#862)
    • 2c6926c [Deps] unpin axe-core
    • b78f19d [Deps] pin axe-core to v4.4.1, due to a breaking change in a patch
    • 768910e [Deps] update @babel/runtime
    • f0e04ce [Deps] update @babel/runtime, jsx-ast-utils
    • 93b2a9d [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-transform-flow-strip-types, @babel/register
    • a962211 [Dev Deps] update @babel/cli, @babel/core, @babel/plugin-transform-flow-strip-types, @babel/register
    • 0d2bc43 [Tests] no-noninteractive-element-interactions: add passing test cases (#876)
    • ffefbad [Tests] no-noninteractive-element-interactions: add passing tests for form with onSubmit (#871)
    • e7d405d [Tests] no-static-element-interactions: add passing test cases

    6.6.0 / 2022-06-23

    • 566011b [New] aria-role: add allowedInvalidRoles option (#828)
    • 64dcac6 [New] Introduce a plugin-wide setting for custom components. (#844)
    • ce2c328 [Fix] no-redundant-roles, role-supports-aria-props: Remove implicit role from dl element (#848)
    • fb20bc4 [Refactor] role-supports-aria-props: clean up the logic a bit
    • 1826628 [Refactor] reduce egregious use of array spread, in favor of [].concat idiom
    • 0f1615a [Docs] no-static-element-interactions: Update error message (#843)
    • 9980d1d [Docs] Add infrastructure for auto-generating markdown table and list (#837)
    • f878d3b [Docs] Update project readme (#831)
    • aea7671 [Deps] update @babel/runtime, array-includes, axe-core, jsx-ast-utils
    • d74173a [Deps] update jsx-ast-utils
    • f6ba03c [Deps] update @babel/runtime, jsx-ast-utils
    • 547dab4 [Deps] update @babel/runtime, axe-core, minimatch
    • baaf791 [Deps] update @babel/runtime, minimatch, semver
    • c015fef [Deps] update @babel/runtime, axe-core, damerau-levenshtein
    • 832cbd6 [meta] add export default instead of module.exports (#861)
    • ee933a2 [meta] Add CONTRIBUTING.md to solicit contributions (#846)
    • fa3c869 [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-transform-flow-strip-types, aud, eslint-plugin-eslint-plugin, eslint-plugin-flowtype, eslint-plugin-import
    • fb3d51e [Dev Deps] update @babel/core, @babel/register, eslint-plugin-import, minimist
    • 8c1df4d [Dev Deps] pin @technote-space/doctoc because v2.5 is a breaking change
    • fb071ab [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-transform-flow-strip-types, eslint-plugin-eslint-plugin
    • 5e966e5 [Dev Deps] update @babel/cli
    • f597f5b [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser
    • 287854a [Tests] Fix npm run flow (#856)
    • 112261c [Tests] skip fragment tests in eslint < 6
    • ea877c4 [Tests] img-redundant-alt-test: add passing tests (#832)
    • 685426d test: align usage of jest expect across tests (#827)
    • c460a8b [Tests] move invalid test case to valid; changed in axe-core v4.4
    Commits
    • d678a98 v6.6.1
    • 93b2a9d [Dev Deps] update @babel/cli, @babel/core, @babel/eslint-parser, `@babe...
    • 768910e [Deps] update @babel/runtime
    • 0d2bc43 [Tests] no-noninteractive-element-interactions: add passing test cases
    • a962211 [Dev Deps] update @babel/cli, @babel/core, `@babel/plugin-transform-flow-...
    • 2c6926c [Deps] unpin axe-core
    • 1c06306 [readme] properly describe rule settings in builtin configs
    • b78f19d [Deps] pin axe-core to v4.4.1, due to a breaking change in a patch
    • ffefbad [Tests] no-noninteractive-element-interactions: add passing tests for form ...
    • 0c19f02 [Docs] no-noninteractive-tabindex, no-static-element-interactions: docume...
    • 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)
    Reviewed by dependabot[bot] at 2022-07-23 07:12
  • 9. chore(deps-dev): bump jest-environment-jsdom from 28.1.1 to 28.1.3

    Bumps jest-environment-jsdom from 28.1.1 to 28.1.3.

    Release notes

    Sourced from jest-environment-jsdom's releases.

    v28.1.3

    Features

    • [jest-leak-detector] Use native FinalizationRegistry when it exists to get rid of external C dependency (#12973)

    Fixes

    • [jest-changed-files] Fix a lock-up after repeated invocations (#12757)
    • [@jest/expect-utils] Fix deep equality of ImmutableJS OrderedSets (#12977)
    • [jest-mock] Add index signature support for spyOn types (#13013, #13020)
    • [jest-snapshot] Fix indentation of awaited inline snapshots (#12986)

    Chore & Maintenance

    • [*] Replace internal usage of pretty-format/ConvertAnsi with jest-serializer-ansi-escapes (#12935, #13004)
    • [docs] Update spyOn docs (#13000)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v28.1.2...v28.1.3

    v28.1.2

    Fixes

    • [jest-runtime] Avoid star type import from @jest/globals (#12949)

    Chore & Maintenance

    • [docs] Mention that jest-codemods now supports Sinon (#12898)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v28.1.1...v28.1.2

    Changelog

    Sourced from jest-environment-jsdom's changelog.

    28.1.3

    Features

    • [jest-leak-detector] Use native FinalizationRegistry when it exists to get rid of external C dependency (#12973)

    Fixes

    • [jest-changed-files] Fix a lock-up after repeated invocations (#12757)
    • [@jest/expect-utils] Fix deep equality of ImmutableJS OrderedSets (#12977)
    • [jest-mock] Add index signature support for spyOn types (#13013, #13020)
    • [jest-snapshot] Fix indentation of awaited inline snapshots (#12986)

    Chore & Maintenance

    • [*] Replace internal usage of pretty-format/ConvertAnsi with jest-serializer-ansi-escapes (#12935, #13004)
    • [docs] Update spyOn docs (#13000)

    28.1.2

    Fixes

    • [jest-runtime] Avoid star type import from @jest/globals (#12949)

    Chore & Maintenance

    • [docs] Mention that jest-codemods now supports Sinon (#12898)
    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)
    Reviewed by dependabot[bot] at 2022-07-23 07:04
  • 10. chore(deps-dev): bump @types/react-dom from 18.0.5 to 18.0.6

    Bumps @types/react-dom from 18.0.5 to 18.0.6.

    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)
    Reviewed by dependabot[bot] at 2022-07-19 08:40
VechaiUI – React components with built-in dark mode using Tailwind CSS
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

Jul 30, 2022
Heart-switch: a heart-shaped toggle switch component for React.
Heart-switch: a heart-shaped toggle switch component for React.

heart-switch A heart-shaped toggle switch component for React. Inspired by Tore Bernhoft's I heart toggle Dribbble shot. ?? Table of Contents ?? Getti

Aug 4, 2022
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Jul 28, 2022
react-health-card 🏥💳 An awesome react health card component.
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

Jun 30, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Dec 22, 2021
React-ens-avatar - React component for ENS avatar image display with emoji as fallback

react-ens-avatar React component for ENS avatar image display with emoji as fall

May 13, 2022
☎️ react-telephone: Tiniest react input phone component (auto formating included)
☎️ react-telephone: Tiniest react input phone component (auto formating included)

☎️ react-telephone: Tiniest react input phone component (auto formating included)

Jun 10, 2022
🎁 Custom Input Text React - An Editable text input component for react.

?? Custom Input Text React - An Editable text input component for react.

Jun 4, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Aug 2, 2022
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

Aug 7, 2022
A React Component library implementing the Base design language
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Aug 5, 2022
The Most Complete React UI Component Library
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

Jul 31, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Jul 7, 2022
React particles animation background component
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Jul 30, 2022
Rheostat is a www, mobile, and accessible slider component built with React
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Jul 30, 2022
A simple React component that is resizable with a handle.

React-Resizable View the Demo A simple widget that can be resized via one or more handles. You can either use the <Resizable> element directly, or use

Aug 1, 2022
📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.
📕React component library designed on the

?? React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Jul 25, 2022
React Component for Swapping on the Serum DEX

@project-serum/swap-ui A reusable React component for swapping on the Serum DEX. The Solana program can be found here. Usage Install First install the

Aug 2, 2022
A React Component library for buliding modern applications easily & quickly.
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Jul 19, 2022