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
// Top level App component | |
import React from "react"; | |
import { ProvideAuth } from "./use-auth.js"; | |
function App(props) { | |
return ( | |
<ProvideAuth> | |
{/* | |
Route components here, depending on how your app is structured. | |
If using Next.js this would be /pages/_app.js |
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 Router from 'next/router'; | |
import Analytics from 'analytics'; | |
import googleAnalyticsPlugin from 'analytics-plugin-ga'; | |
const analytics = Analytics({ | |
debug: process.env.NODE_ENV !== 'production', | |
plugins: [ | |
googleAnalyticsPlugin({ | |
trackingId: process.env.GA_TRACKING_ID | |
}) |
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, useCallback, useRef } from "react"; | |
// Usage | |
function App() { | |
const [hoverRef, isHovered] = useHover(); | |
return ( | |
<div ref={hoverRef}> | |
{isHovered ? '😁' : '☹️'} | |
</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, useEffect, useCallback } from 'react'; | |
// Usage | |
function App(){ | |
// State for storing mouse coordinates | |
const [coords, setCoords] = useState({ x: 0, y: 0 }); | |
// Event handler utilizing useCallback ... | |
// ... so that reference never changes. | |
const handler = useCallback( |
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
// Current auth status | |
let currentAuth = false; | |
// Holds setAuth for every instance of hook | |
const authSetters = new Set(); | |
function useFakeAuth() { | |
// Auth state and setter | |
const [auth, setAuth] = useState(currentAuth); |
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
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
// 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 } 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
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> |