cawfree / React Dark Mode Toggle
🦉 A cutesy dark mode toggle button for React.
Stars: ✭ 117
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
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
Countdownbutton
⏳A button component with a countdown function
Stars: ✭ 87 (-25.64%)
Mutual labels: button
Statebutton
一个可以用代码设置selector背景(按下去背景颜色更改,样式变化等等)的button, 再也不用写selector了
Stars: ✭ 1,276 (+990.6%)
Mutual labels: button
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
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.
🚀 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
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].