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
@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 Jul 23, 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.
View HOC-w-Render-Prop.js
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
document.body.style.background = `
linear-gradient(135deg,
#1e5799 0%,
#2989d8 50%,
#207cca 51%,
#7db9e8 100%
@mjackson
mjackson / react-15-6-2.html
Last active May 10, 2018
React TestUtils Simulate regression between 15.6.2 and 16.3.2
View react-15-6-2.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@15.6.2/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
View router.js
import React from "react";
import pathToRegexp from "path-to-regexp";
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
You can’t perform that action at this time.