All Projects → cawfree → React Dark Mode Toggle

cawfree / React Dark Mode Toggle

🦉 A cutesy dark mode toggle button for React.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Dark Mode Toggle

Angular2 Promise Buttons
Chilled loading buttons for angular2
Stars: ✭ 84 (-28.21%)
Mutual labels:  button
Dark Fb
Hack Facebook
Stars: ✭ 98 (-16.24%)
Mutual labels:  dark
Github Dark
Dark GitHub style
Stars: ✭ 9,479 (+8001.71%)
Mutual labels:  dark
React Native Circle Button
A Customizable React Native Circle Button
Stars: ✭ 87 (-25.64%)
Mutual labels:  button
Windows10debloater
Script to remove Windows 10 bloatware.
Stars: ✭ 11,462 (+9696.58%)
Mutual labels:  button
Gradient Screens
🌈 Gradients applied to buttons, texts and backgrounds in Flutter
Stars: ✭ 97 (-17.09%)
Mutual labels:  button
Wymaterialbutton
Interactive and fully animated Material Design button for iOS developers.
Stars: ✭ 80 (-31.62%)
Mutual labels:  button
Flutter Reaction Button
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button
Stars: ✭ 111 (-5.13%)
Mutual labels:  button
Spbutton
自定义按钮,图片可在上、左、下、右,可调整图文间距,新增属性支持storyBoard/xib,系统按钮的所有属性和方法依然生效
Stars: ✭ 91 (-22.22%)
Mutual labels:  button
Iceberg.vim
🇦🇶 Bluish color scheme for Vim and Neovim
Stars: ✭ 1,636 (+1298.29%)
Mutual labels:  dark
Countdownbutton
⏳A button component with a countdown function
Stars: ✭ 87 (-25.64%)
Mutual labels:  button
Shadowfox
A universal dark theme for Firefox
Stars: ✭ 1,295 (+1006.84%)
Mutual labels:  dark
Recordbutton
A record button in Swift
Stars: ✭ 101 (-13.68%)
Mutual labels:  button
Statebutton
一个可以用代码设置selector背景(按下去背景颜色更改,样式变化等等)的button, 再也不用写selector了
Stars: ✭ 1,276 (+990.6%)
Mutual labels:  button
Jhform
JhForm - 自定义表单工具,更加简单,快捷的创建表单、设置页面
Stars: ✭ 108 (-7.69%)
Mutual labels:  dark
React Planet
A react lib for building circular menus in a very easy and handy way.
Stars: ✭ 83 (-29.06%)
Mutual labels:  button
Photon.vim
An elegant pair of Vim colour schemes with minimal syntax highlighting that care about the little details.
Stars: ✭ 98 (-16.24%)
Mutual labels:  dark
Ghidra darknight
DarkNight theme for Ghidra
Stars: ✭ 115 (-1.71%)
Mutual labels:  dark
Biaui
WPF dark theme and controls for .NET Core and .NET Framework
Stars: ✭ 109 (-6.84%)
Mutual labels:  dark
React Particle Effect Button
Bursting particle effect buttons for React 🎉
Stars: ✭ 1,385 (+1083.76%)
Mutual labels:  button

react-dark-mode-toggle

A super cutesy dark mode toggle button for React. Inspired by overreacted.io.

code style: prettier

🚀 Getting Started

Using npm:

npm i react-dark-mode-toggle

Using yarn:

yarn add react-dark-mode-toggle

✨ Usage

import React, {useState} from "react";
import DarkModeToggle from "react-dark-mode-toggle";

export default () => {
  const [isDarkMode, setIsDarkMode] = useState(() => false);
  return (
    <DarkModeToggle
      onChange={setIsDarkMode}
      checked={isDarkMode}
      size={80}
    />
  );
};

📌 Props

Prop Type Default Required
onChange func value => null No
checked boolean false No
size number (defaults to px) or string (px, em, rem, %, etc.) 85 No
speed number 1.3 No
className string null No

Note, this is not a dark mode theme implementation; it's just a button! You'll need to mix this with a management solution such as use-dark-mode.

✌️ License

MIT

Buy @cawfree a coffee

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].