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-compare-previous.jsx
import React, { useState, useEffect, useRef } from 'react';
// Usage
function MyComponent({ obj }) {
const [state, setState] = useState();
// We want the previous obj if is the same as the new
// We pass a custom equality function as the second arg to our hook.
const theObj = useMemoCompare(obj, prev => prev && ===;
View gist:1d47d265b841cdf09e7fc7e6801c039e
const signinAnonymously = () => {
return firebase.auth().signInAnonymously()
.then(response => {
return response.user;
View use-async.jsx
import React, { useState, useEffect, useCallback } from 'react';
// Usage
function App() {
const { execute, pending, value, error } = useAsync(myFunction, false);
return (
{value && <div>{value}</div>}
{error && <div>{error}</div>}
View use-require-auth.js
import Dashboard from "./Dashboard.js";
import Loading from "./Loading.js";
import { useRequireAuth } from "./use-require-auth.js";
function DashboardPage(props) {
const auth = useRequireAuth();
// If auth is null (still fetching data)
// or false (logged out, above hook will redirect)
// then show loading indicator.
View use-router.jsx
import { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';
import queryString from 'query-string';
// Usage
function MyComponent(){
// Get the router object
const router = useRouter();
// Get value from query string (?postId=123) or route param (/:postId)
gragland / auth.js
Last active Feb 24, 2020
Auth0 React Hook (exported by
View auth.js
import React, { useState, useEffect, useContext, createContext } from "react";
import Auth0 from "auth0-js";
- Create a new Auth0 application and choose type "Single Page Web Applications"
- Go to your news app's setting and add the domain and clientId to the code below
where it says "Replace me".
- In your new apps settings scroll to the bottom, click "Show Advanced Settings",
go to the "Grant Types" tab, check the "Password" option, then click save.
View use-auth.jsx
// Top level App component
import React from "react";
import { ProvideAuth } from "./use-auth.js";
function App(props) {
return (
Route components here, depending on how your app is structured.
If using Next.js this would be /pages/_app.js
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: [
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 ? '😁' : '☹️'}
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(
You can’t perform that action at this time.