Skip to content

Instantly share code, notes, and snippets.

View djD-REK's full-sized avatar
🌞
Full-Stack JavaScript Developer & Doctor of Physical Therapy 🌞

Dr. Derek Austin djD-REK

🌞
Full-Stack JavaScript Developer & Doctor of Physical Therapy 🌞
View GitHub Profile
@djD-REK
djD-REK / index.js
Created August 12, 2019 16:24
Used in the Medium article 2019 Guide: How to Use React Hooks to Create a Toggle Switch or Counter, from my Github true-false-toggle-using-react-hooks-demo
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [toggleState, setToggleState] = useState({ isTrue: false });
const [counterState, setCounterState] = useState({ counter: 0 });
const toggleTrueFalse = () => {
@djD-REK
djD-REK / use-dark-mode-demo-part-1.js
Last active August 12, 2019 19:32
Used in the Medium article: Dark Mode for ANY React App 2019: Part 1 of a Series on Day/Night Toggles
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useDarkMode from "use-dark-mode"; // Don't forget to import the NPM package use-dark-mode
import "./styles.scss";
function App() {
const darkMode = useDarkMode(false);
const getDayNightAsString = () => {
@djD-REK
djD-REK / use-dark-mode-in-two-lines-of-code.js
Last active August 12, 2019 18:06
Used in the Medium article: Dark Mode for ANY React App 2019: Part 1 of a Series on Day/Night Toggles
import useDarkMode from "use-dark-mode"; // Don't forget to import the NPM package use-dark-mode
function darkModeToggleButton() {
const darkMode = useDarkMode(false);
return (<button onClick={darkMode.toggle}>Toggle Day / Night</button>);
}
@djD-REK
djD-REK / use-dark-mode-demo-part-1.js
Last active September 10, 2019 02:18
Create Dark Mode for React with use-dark-mode
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useDarkMode from "use-dark-mode"; // Don't forget to import the NPM package use-dark-mode
import "./styles.scss";
function App() {
const { value, toggle } = useDarkMode(false);
const dayNightAsString = value ? "🌕 Night": "☀️ Day";
@djD-REK
djD-REK / react-hooks-toggle-switch-counter-demo.js
Last active January 22, 2021 13:27
Use React Hooks to Create a Toggle Switch or Counter
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [isToggled, setToggled] = useState(false);
const [counterState, setCounterState] = useState(0);
const toggleTrueFalse = () => setToggled(!isToggled);

Spectral

This site was generated by www.stackbit.com, v0.2.63.

Spectral original README is located here.

The content of this site is managed by Forestry. Visit https://forestry.io to manage site content.

Spectral
This site was generated by www.stackbit.com, v0.2.63.
Spectral original README is located here.
The content of this site is managed by Forestry. Visit https://forestry.io to manage site content.
The content of this site is managed by NetlifyCMS. Visit https://{yoursite-domain}/admin to manage site content.
@djD-REK
djD-REK / animated-emoji-penguin.js
Created August 14, 2019 03:07
Animated Emoji Penguin - Big Penguin Edition - by Dr. Derek Austin 🥳 @derek_develops
import React from "react";
import ReactDOM from "react-dom";
import { motion } from "framer-motion";
import "./styles.css";
function App() {
return (
<div className="App">
<motion.div
import React from "react";
import ReactDOM from "react-dom";
import { motion } from "framer-motion";
import "./styles.css";
function App() {
return (
<div className="App">
<motion.div