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>;
}
	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);
	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() {
	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)
	}
	// 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:
	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) {
	import { useState, useEffect, useCallback } from 'react'

	function usePromise(createPromise) {
	const [error, setError] = useState()
	const [value, setValue] = useState()

	useEffect(() => {
	let current = true

	createPromise().then(
	# 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.
	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%
	<!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>
	import React from "react";
	import pathToRegexp from "path-to-regexp";

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

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