Skip to content

Instantly share code, notes, and snippets.

Michael Jackson mjackson

Block or report user

Report or block mjackson

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 react-router-lazy.js
import React from 'react';
import { lazy } from 'react-suspense-resource';
let Courses = lazy(() => import('./Courses.js'));
let CoursesIndex = lazy(() => import('./CoursesIndex.js'));
let routes = [
{
path: "courses",
element: <Courses />,
View routes.js
let routes = (
<RankedSwitch>
{/*
<RankedSwitch> picks the best child <Route> that matches
the path. Like <Switch>, it does not match deeply, so you
need to use /* on the path if you want to do that. Like
@reach/router's <Router>, it ranks the paths so you don't
have to think about ordering.
Con: You have to use /* to do deep matching
@mjackson
mjackson / toggle-desktop-icons.sh
Last active Sep 24, 2019
Quickly show/hide desktop icons on macos
View toggle-desktop-icons.sh
#!/bin/bash
# To install: just copy this script to your machine and name it whatever you want.
# Let's say you named it toggle-desktop-icons.sh, then all you need to do is make
# the script executable, like this:
#
# chmod +x toggle-desktop-icons.sh
#
# Now you can execute the script directly in the terminal any time you want to
# show/hide the desktop icons, like this:
@mjackson
mjackson / useMediaQuery.js
Created Jul 25, 2019
A React hook for listening to the state of a CSS media query
View useMediaQuery.js
import { useEffect, useState } from 'react';
export default function useMediaQuery(query, defaultValue) {
const [matches, setMatches] = useState(defaultValue);
useEffect(() => {
const mql = window.matchMedia(query);
setMatches(mql.matches);
View useUndo.js
import { useRef, useState } from 'react'
function useUndo([state, setState]) {
const history = useRef([state])
const [index, setIndex] = useState(0)
function undo() {
setIndex(Math.max(index - 1, 0))
}
function redo() {
View useStateWithHistory.js
function useStateWithHistory(defaultValue) {
const history = useRef([defaultValue])
const [index, setIndex] = useState(0)
function undo() {
setIndex(index > 0 ? index - 1 : index)
}
function redo() {
setIndex(index < history.current.length - 1 ? index + 1 : index)
}
View render-props-v-hooks.js
// We want to subscribe to some data. Here are 2 ways to do the SAME thing.
// 1. setup some state
// 2. subscribing to a uid, set posts when they come in
// 3. unsubscribing when the component unmounts
// 4. when the uid changes:
// - unsubscribing from prev uid
// - re-subscribing to the new uid
// Here's a render prop:
@mjackson
mjackson / useStorage.js
Last active Nov 8, 2019
A React hook for persisting state between page refreshes (also SSR compatible)
View useStorage.js
import { useEffect, useRef } from 'react';
function getItem(storage, key) {
const value = storage.getItem(key);
if (!value) return null;
try {
return JSON.parse(value);
} catch (error) {
View usePromise.js
import { useState, useEffect, useCallback } from 'react'
function usePromise(createPromise) {
const [error, setError] = useState()
const [value, setValue] = useState()
useEffect(() => {
let current = true
createPromise().then(
@mjackson
mjackson / travis.yml
Last active Sep 6, 2019
Travis CI + google-cloud-sdk + updated kubectl + Docker
View travis.yml
# The Google Cloud SDK on Travis is pretty old (2014). So if
# you want to use an up-to-date version, you have to install
# your own. This config is the bare minimum you'll need to
# get an updated version of the SDK + kubectl.
cache:
directories:
# We cache the SDK so we don't have to download it again on subsequent builds.
- $HOME/google-cloud-sdk
services:
# Include the docker service so you can roll your own images.
You can’t perform that action at this time.