Skip to content

Instantly share code, notes, and snippets.

Gabe Ragland gragland

Block or report user

Report or block gragland

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View use-auth.jsx
// 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
@gragland
gragland / analytics.js
Last active Jul 30, 2019
Import this at the top of /pages/_app.js in your Next.js app
View analytics.js
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
})
View use-hover-alt-example.js
import { useState, useCallback, useRef } from "react";
// Usage
function App() {
const [hoverRef, isHovered] = useHover();
return (
<div ref={hoverRef}>
{isHovered ? '😁' : '☹️'}
</div>
View use-event-listener.js
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(
@gragland
gragland / use-fake-auth-hook.js
Created Feb 28, 2019
useFakeAuth React Hook
View use-fake-auth-hook.js
// 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);
View use-why-did-you-update2.js
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>;
});
View use-why-did-you-update.js
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>;
});
View use-dark-mode.jsx
// Usage
function App() {
const [darkMode, setDarkMode] = useDarkMode();
return (
<div>
<div className="navbar">
<Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
</div>
<Content />
View use-media.jsx
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
View lock-body-scroll-example.jsx
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>
You can’t perform that action at this time.