This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function useTheme(theme) { | |
useLayoutEffect( | |
() => { | |
// Iterate through each value in theme object | |
for (const key in theme) { | |
// Update css variables in document's root element | |
document.documentElement.style.setProperty(`--${key}`, theme[key]); | |
} | |
}, | |
[theme] // Only call again if theme object reference changes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useOnClickOutside from 'use-onclickoutside' | |
export default function Modal({ close }) { | |
const ref = React.useRef(null) | |
useOnClickOutside(ref, close) | |
return <div ref={ref}>{'Modal content'}</div> | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect, useRef } from "react"; | |
// Let's pretend this <Counter> component is expensive to re-render so ... | |
// ... we wrap with React.memo, but we're still seeing performance issues :/ | |
// So we add useWhyDidYouUpdate and check our console to see what's going on. | |
const Counter = React.memo((props) => { | |
useWhyDidYouUpdate("Counter", props); | |
return <div style={props.style}>{props.count}</div>; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function useWhyDidYouUpdate(name, props) { | |
// Get a mutable ref object where we can store props ... | |
// ... for comparison next time this hook runs. | |
const previousProps = useRef(); | |
useEffect(() => { | |
if (previousProps.current) { | |
// Get all keys from previous and current props | |
const allKeys = Object.keys({ ...previousProps.current, ...props }); | |
// Use this object to keep track of changed props |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; | |
const Dictaphone = () => { | |
const { | |
transcript, | |
listening, | |
resetTranscript, | |
browserSupportsSpeechRecognition | |
} = useSpeechRecognition(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useDarkMode } from "react-recipes"; | |
const [darkMode, setDarkMode] = useDarkMode(); | |
return ( | |
<div className="header"> | |
<Toggle darkMode={darkMode} setDarkMode={setDarkMode} /> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useSound from 'use-sound'; | |
import switchOn from '../sounds/siwth-on.mp3'; | |
const Swtich = () => { | |
const [play] = useSound(switchOn); | |
return <button onClick={play}>Toggle!</button>; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Section = ({ children }) => { | |
return ( | |
<Container> | |
{children} | |
</Container> | |
); | |
} | |
const Container = styled.section` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Fonts */ | |
theme.fontSizes.body = fontSizes[2]; | |
theme.fontSizes.title = fontSizes[3]; | |
theme.fontSizes.subTitle = fontSizes[1]; | |
theme.fontSizes.pageHeading = fontSizes[5]; | |
theme.fontSizes.h1 = fontSizes[5]; | |
theme.fontSizes.h2 = fontSizes[4]; | |
theme.fontSizes.h3 = fontSizes[3]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const fontSizes = [12, 14, 16, 18, 20, 24, 36, 48, 80, 96]; | |
const fontWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900]; | |
const lineHeights = [1, 1.25, 1.5]; | |
const radii = ['0px', '2px', '4px', '8px', '16px', '48px']; | |
const space = [0, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512]; | |
const theme = { | |
breakpoints: [32, 48, 64], | |
space, |