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, useMemo } from 'react'; | |
// Usage | |
function App() { | |
// State for our counter | |
const [count, setCount] = useState(0); | |
// State to keep track of current word in array we want to show | |
const [wordIndex, setWordIndex] = useState(0); | |
// Words we can flip through and view letter count |
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 } from 'react'; | |
// Usage | |
function App() { | |
// Call our hook for each key that we'd like to monitor | |
const happyPress = useKeyPress('h'); | |
const sadPress = useKeyPress('s'); | |
const robotPress = useKeyPress('r'); | |
const foxPress = useKeyPress('f'); |
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 } from 'react'; | |
// Usage | |
function App() { | |
const status = useScript( | |
'https://pm28k14qlj.codesandbox.io/test-external-script.js' | |
); | |
return ( | |
<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 { useReducer, useCallback } from 'react'; | |
// Usage | |
function App() { | |
const { state, set, undo, redo, clear, canUndo, canRedo } = useHistory({}); | |
return ( | |
<div className="container"> | |
<div className="controls"> | |
<div className="title">👩🎨 Click squares to draw</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, useRef } from 'react'; | |
import { useSpring, animated } from 'react-spring'; | |
// Displays a row of cards | |
// Usage of hook is within <Card> component below | |
function App() { | |
return ( | |
<div className="container"> | |
<div className="row"> | |
{cards.map((card, i) => ( |
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 { useLayoutEffect } from 'react'; | |
import './styles.scss'; // -> https://codesandbox.io/s/15mko9187 | |
// Usage | |
const theme = { | |
'button-padding': '16px', | |
'button-font-size': '14px', | |
'button-border-radius': '4px', | |
'button-border': 'none', | |
'button-color': '#FFF', |
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, useLayoutEffect } from 'react'; | |
// Usage | |
function App(){ | |
// State for our modal | |
const [modalOpen, setModalOpen] = useState(false); | |
return ( | |
<div> | |
<button onClick={() => setModalOpen(true)}>Show Modal</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
import { useState, useEffect } from 'react'; | |
function App() { | |
const columnCount = useMedia( | |
// Media queries | |
['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'], | |
// Column counts (relates to above media queries by array index) | |
[5, 4, 3], | |
// Default column count | |
2 |
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
// Usage | |
function App() { | |
const [darkMode, setDarkMode] = useDarkMode(); | |
return ( | |
<div> | |
<div className="navbar"> | |
<Toggle darkMode={darkMode} setDarkMode={setDarkMode} /> | |
</div> | |
<Content /> |
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>; | |
}); |