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 obj.id is the same as the new obj.id
// We pass a custom equality function as the second arg to our hook.
const theObj = useMemoCompare(obj, prev => prev && prev.id === obj.id);
View gist:1d47d265b841cdf09e7fc7e6801c039e
const signinAnonymously = () => {
return firebase.auth().signInAnonymously()
.then(response => {
setUser(response.user);
return response.user;
});
};
etc...
View use-async.jsx
import React, { useState, useEffect, useCallback } from 'react';
// Usage
function App() {
const { execute, pending, value, error } = useAsync(myFunction, false);
return (
<div>
{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)
console.log(router.query.postId);
@gragland
gragland / auth.js
Last active Feb 24, 2020
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(
You can’t perform that action at this time.