Skip to content

Instantly share code, notes, and snippets.

Avatar
💿

Michael Jackson mjackson

💿
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 Nov 4, 2021
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 May 25, 2022
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>;
}