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 useControl.js
function useControl(defaultValue, value, onChange) {
let [localValue, setLocalValue] = useState(defaultValue)
let isControlled = value != null // the key
let activeIndex = isControlled ? value : localValue
let setActiveIndex = nextIndex => {
if (isControlled) {
if (onChange) {
onChange(nextIndex)
} else {
View expect-element.js
expect.extend({
toContainElement(instance, targetElement) {
let matchingElements = instance.findAllByProps(targetElement.props);
if (matchingElements.length === 0) {
return {
message() {
let props = JSON.stringify(targetElement.props);
return `expected to find element with props ${props}`;
},
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) {
You can’t perform that action at this time.