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-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)
console.log(router.query.postId);
@gragland
gragland / auth.js
Last active Oct 5, 2019
Auth0 React Hook (exported by divjoy.com)
View auth.js
import React, { useState, useEffect, useContext, createContext } from "react";
import Auth0 from "auth0-js";
/*
SETUP INSTRUCTIONS:
- 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 (
<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 />
You can’t perform that action at this time.