Michael Jackson mjackson

## 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);

## 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() {

## 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)
  }

## 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:

## 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) {

## 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(

## 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.

## 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%

## 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>

## router.js
import React from "react";
import pathToRegexp from "path-to-regexp";

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}