Skip to content

Instantly share code, notes, and snippets.

Avatar

Michael Jackson mjackson

View GitHub Profile
View react-preload-example.js
import React from 'react';
let DataContext = React.createContext();
// A higher-order component for pairing preload function + component ...
function withData(preloadData, Component, autoPreloadOnRender = true) {
let needsPreload = !!autoPreloadOnRender;
let promise;
let value;
View renderFeed.js
let feed = {
type: 'rss',
props: {
'xmlns:blogChannel': 'https://...',
version: '2.0',
children: [
{
type: 'channel',
props: {
title: 'Remix Blog',
View useControl.js
function useControl(defaultValue, value, onChange) {
let [localValue, setLocalValue] = React.useState(defaultValue)
let isControlled = value != null // the key
let activeValue = isControlled ? value : localValue
let setActiveValue = nextValue => {
if (isControlled) {
if (onChange) {
onChange(nextValue)
} 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)
}
You can’t perform that action at this time.