• This repository has been archived on 28/Oct/2021
  • Stars
    star
    154
  • Rank 242,095 (Top 5 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿฆ‰ A cutesy dark mode toggle button for React.

react-dark-mode-toggle

Hello! ๐Ÿ‘‹ This package is now deprecated. Please migrate over to react-dark-mode-toggle-2.

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

More Repositories

1

create-react-native-dapp

Your next Ethereum application starts here. โš›๏ธ ๐Ÿ’ช ๐Ÿฆ„
TypeScript
430
star
2

react-native-wormhole

โš›๏ธ ๐ŸŒŒ Inter-dimensional Portals for React Native. ๐Ÿ‘ฝ ๐Ÿ––
TypeScript
307
star
3

react-native-webassembly

โš›๏ธ ๐ŸŽ WebAssembly for React Native powered by JSI.
C
274
star
4

react-native-quiet

๐Ÿคซ Quiet for React Native.
JavaScript
173
star
5

react-native-segmented-text-input

A wickedly customizable <TextInput /> for React Native. Useful for tags, spellchecking, whatever.
JavaScript
138
star
6

react-native-rough

โš›๏ธโœ๏ธRough.js bindings for that hand-drawn feel.
JavaScript
108
star
7

zk-starter

zero knowledge for those with zero knowledge
Solidity
102
star
8

react-native-openai-jsx

โš›๏ธ ๐Ÿงช ๐Ÿค– Use OpenAI to generate functioning React Native components!
TypeScript
92
star
9

OpenChirp

A reverse-engineered implementation of the Chirp data-over-audio protocol.
Java
83
star
10

react-native-helios

โš›๏ธ A fast, secure, and portable light client for Ethereum dApps.
TypeScript
81
star
11

react-native-twitter-textview

A <TextView/> component for React Native built on top of twitter-text linkification.
JavaScript
71
star
12

web3-react-native

โš›๏ธ Web3 Native Modules for React Native.
JavaScript
62
star
13

react-cola

WebCola for React.
JavaScript
59
star
14

react-native-walletconnect

โš›๏ธ ๐Ÿ‘› WalletConnect for React Native! Zero linking, full awesome. (Android/iOS/Web/Expo)
JavaScript
54
star
15

react-native-blobular

The Man in Blue's awesome Blobular, ported to React Native.
JavaScript
53
star
16

react-native-custom-fonts

Use dynamic fonts specified via a network location, instead of managing them in your native builds!
Java
48
star
17

opensea-arb-nft20

๐Ÿงธ ๐Ÿ’ธ Detects arbitrage opportunities for ERC-721 tokens between OpenSea and NFT20.
JavaScript
47
star
18

react-native-picture-puzzle

โš›๏ธ ๐Ÿงฉ A picture puzzle component.
TypeScript
42
star
19

opensea-floor-looks-rare

๐Ÿงธ ๐Ÿ’ธ Determine the rarity of floor NFTs on OpenSea.
JavaScript
39
star
20

react-native-rotary

๐Ÿ•ฐ๏ธ A <Rotary /> component for React Native.
JavaScript
37
star
21

react-native-basement

๐Ÿญ๐Ÿงโ›ฑ๏ธ๐Ÿ“ฆCache all kinds of remote dependencies.
JavaScript
35
star
22

thegraph-react

โš›๏ธ React bindings for helping build decentralized applications quickly on Ethereum and IPFS using GraphQL.
Java
33
star
23

react-native-sensor-fusion

Robust absolute positioning in React Native.
JavaScript
30
star
24

opensea-submarine

Ping. Ping. Ping.
TypeScript
30
star
25

react-native-apple-scroll-wheel

The iconic scroll wheel that debuted with the original iPod. Now for React Native.
JavaScript
29
star
26

nodejs-mobile-react-native-bridge

A high-level wrapper interface to Node.js for React Native.
JavaScript
29
star
27

sameorigin

๐Ÿค– ๐Ÿงช Masquerade as if you were their own frontend.
TypeScript
26
star
28

react-native-localhost

โš›๏ธ ๐Ÿก Returns the local address of your actual development machine.
JavaScript
25
star
29

react-native-label

๐Ÿฅ‡Apply a label to anything in React Native.
JavaScript
23
star
30

react-native-search-bar-button

๐Ÿ•Š๏ธ Is it a bird? โœˆ๏ธ Is it a plane? No, it's a search-bar-button! โš›๏ธ
JavaScript
22
star
31

react-use-logs

โš›๏ธ ๐Ÿ–จ๏ธ A hierarchy sensitive, middleware-defined console.log for React and React Native. โœจ
TypeScript
21
star
32

react-native-pure-data

๐Ÿ”ˆ โšก Synthesize algorithmic sound at runtime in React Native.
JavaScript
20
star
33

react-native-use-plaid

โš›๏ธ ๐Ÿ’ธ Simple hooks for Plaid open banking on React Native.
TypeScript
20
star
34

Dynamic-Time-Warping

A Dynamic Time Warping (DTW) implementation on Android.
Java
19
star
35

earcut-j

A pure Java implementation of the earcut triangulation library.
Java
19
star
36

react-native-heat-map

A <HeatMap /> Native Module component for React Native.
Java
18
star
37

react-native-webview-modal

โš›๏ธ A WebView <Modal /> component for React Native, where the source content is pre-loaded for speed ๐Ÿ. (iOS/Android/Web/Expo)
JavaScript
18
star
38

react-native-layout-animation-provider

A React Native <Provider/> for synchronizing your LayoutAnimations.
JavaScript
17
star
39

autographed

The self-building, hot-reloading subgraph. The quickest way to start indexing your shit.
TypeScript
16
star
40

crypto-lstm-3

๐Ÿ’ต Using word2vec to predict trends in cryptocurrency.
JavaScript
15
star
41

react-native-pretty-payment

โš›๏ธ ๐Ÿค‘ Super pretty payment inputs for React Native.
TypeScript
15
star
42

use-delegatecash

โš›๏ธ ๐Ÿ’ธ React.js hooks for delegate.cash
TypeScript
14
star
43

otsu

โœ‚๏ธ Otsu's Method for automated thresholding in JavaScript.
JavaScript
13
star
44

pyongyang

โš›๏ธ ๐Ÿ“ฑ The quickest way to utilize web dependencies inside React Native.
JavaScript
13
star
45

react-native-elsewhere

Ridiculously simple React Native thread unblocking.
JavaScript
13
star
46

react-native-twitter-embed

Twitter Embeds for React Native + Expo. (Web/iOS/Android) https://publish.twitter.com/
Java
12
star
47

byth

The behavioural indexer for Ethereum.
Rust
11
star
48

collection-slug

๐Ÿงธ ๐Ÿค– Determine the collection slug for a collection on OpenSea.
TypeScript
11
star
49

redacted

A plugin architecture for React.
JavaScript
11
star
50

react-native-simpler-date-picker

A simple date picker component with a focus on reducing implementation complexity.
JavaScript
11
star
51

nftrarity-chrome

๐Ÿ’ธ ๐Ÿงธ ๐Ÿ“ˆ A Chrome plugin to display the rarity of an NFT inline on OpenSea ๐ŸŒŠ
JavaScript
10
star
52

react-native-elastic-footer

A React Native ScrollView footer with a little give.
JavaScript
9
star
53

react-native-lottie-files-picker

A React Native List that supports the selection of beautiful Lottie Animations sourced by Lottie Files.
JavaScript
9
star
54

react-native-buttered-toast

A customizable toast notification for React Native.
JavaScript
8
star
55

react-native-split-styles

๐Ÿ’… Split StyleSheet keys into dedicated objects to help ease the routing of styles for nested components.
JavaScript
8
star
56

react-native-number-ticker-input

๐Ÿ“Ÿ A customizable numeric input in the style of a ticker.
JavaScript
8
star
57

react-native-splash-generate

Programmatically generates a launch image for all screen densities from a single image source.
JavaScript
8
star
58

react-native-firebase-upload-provider

๐Ÿ“ธ Easily and quickly upload rich media to Firebase Storage.
JavaScript
7
star
59

log-in-as-a-lobster

โš›๏ธ Log In as a Lobster ๐Ÿฆž
TypeScript
7
star
60

ribbon-vg

A hardware accelerated platform independent signed distance vector graphics rendering library.
Java
7
star
61

react-native-drag-to-reveal

โš›๏ธ ๐Ÿ–• You drag, it reveals. (Android/iOS/Web/Expo)
TypeScript
7
star
62

dsfe

๐Ÿ’ช Do some fucking exercise.
TypeScript
6
star
63

hardhat-copy

Pull a smart contract from mainnet onto your local chain.
TypeScript
6
star
64

react-native-unibubbles

An animated floating header component. You probably don't need it. ๐Ÿ˜œ
JavaScript
6
star
65

use-merge

โš›๏ธ ๐Ÿ’ก Simplify the relationships between multiple hooks.
TypeScript
6
star
66

propeteer

๐ŸงธConfig comes in, React comes out.
JavaScript
6
star
67

lottie-mutate

A collection of functions useful for manipulating raw Lottie Animation JSON programatically.
JavaScript
6
star
68

twitch-go

๐ŸŽฎ A Chromebook desktop streaming utility for Twitch.
JavaScript
6
star
69

react-native-simple-date-picker

An idiot-proof date picker for React Native.
JavaScript
6
star
70

nanovgj

A Java implementation of NanoVG.
Java
5
star
71

react-native-animated-look-up-table

Creates a look up table which can be used to interpolate across the results of an arbitrary function.
JavaScript
5
star
72

nifty-inker

๐Ÿฆ„ ๐ŸŽจ a programmatic painter for nifty.ink because i have no talent
TypeScript
5
star
73

react-native-simpleheat

The awesome simpleheat.js, bound to React Native.
JavaScript
5
star
74

react-use-mutator

A React hook for inspecting and mutating shared state without subscribing to render updates.
JavaScript
5
star
75

nftrarityjs

โšก๐Ÿงธโšก A collection of tools for comparing the 1337ness of an NFT.
JavaScript
5
star
76

react-dfd

Dataflow Diagrams for React. ๐Ÿ–‡๏ธ
JavaScript
5
star
77

react-native-uri-box

An extendible React <Component/> which will attempt to render source content consistently, based on the MIME type.
JavaScript
5
star
78

countersoiree

๐Ÿ’ƒ ๐Ÿงช GraphQL for the Ethereum mempool.
TypeScript
4
star
79

react-native-view-evaluator

A React Native <Component /> which can be used to determine the post-layout configuration of a <View />.
JavaScript
4
star
80

react-dataflow

A dataflow execution library for React.
JavaScript
4
star
81

sabrina

โœจ Asynchronous dashboard magic!
JavaScript
4
star
82

RegionView

A simple Android Layout that enables drag and zoom for child Views.
Java
4
star
83

timusoid

Cyclic representations of time.
JavaScript
4
star
84

reuters-dataset

๐Ÿ—ž๏ธ A tool for downloading and parsing Reuters-21578. These are a collection of documents that appeared on Reuters newswire back in 1987.
JavaScript
3
star
85

ethers-url

๐Ÿฆ„ ๐Ÿ”— Convert high level ethers transactions into sharable links!
TypeScript
3
star
86

react-native-cycle-text

A simple React Native component which lets you randomly cycle through an array of text Strings.
JavaScript
3
star
87

autogist

โšก๐Ÿ“„ ๐ŸฅฏA mini Twitter for your pinned repositories.
JavaScript
3
star
88

react-native-windowed-collapsible

A <Collapsible/> component for React Native, with a difference.
JavaScript
3
star
89

react-pretty-ethereum

โš›๏ธ ฮž Render Web3 data models in a user-friendly way.
JavaScript
3
star
90

react-native-modal-provider

A React <Provider /> for managing <Modal />s.
JavaScript
3
star
91

express-cors-anywhere

๐ŸŒ An express middleware for redirecting requests and avoiding CORS errors when hitting cross-origin APIs.
JavaScript
3
star
92

supporting-material

All of the notes, slides and documentation for any public speaking I've had the luck of being invited along to.
JavaScript
3
star
93

rippleware

๐Ÿšฃ A middleware-inspired toolbox that promotes stateful function extensibility.
JavaScript
3
star
94

sofia

Firestore Rules. With variables.
JavaScript
3
star
95

piggyback

๐Ÿฆ„ ๐Ÿค– A replica implementation of an MEV honeypot bot I caught out in the wild.
TypeScript
3
star
96

jovo-babel-project

An example project using Jovo Framework alongside JavaScript ES6.
JavaScript
2
star
97

react-apple-pay-button

... It's an Apple Pay button. For React. ๐Ÿคทโ€โ™€๏ธ
JavaScript
2
star
98

timebuffer

โฒ๏ธ Simple segmentation of timeboxed data handlers.
JavaScript
2
star
99

react-silhouette

Deferred unmounting in React.js.
JavaScript
2
star
100

archimedean-spiral-layout

An algorithm that can be used to place items collision-free within a bounding box that contains obstacles.
JavaScript
2
star