mjackson

import React from "react";

export type ColorScheme = "light" | "dark";

export default function useColorSchemePreference(
  defaultColorScheme: ColorScheme = "light"
) {
  let darkQuery = "(prefers-color-scheme: dark)";
  let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
    typeof window === "object" && window.matchMedia

mjackson

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;

mjackson

let feed = {
  type: 'rss',
  props: {
    'xmlns:blogChannel': 'https://...',
    version: '2.0',
    children: [
      {
        type: 'channel',
        props: {
          title: 'Remix Blog',

mjackson

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 {

mjackson

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}`;
        },

mjackson

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 />,

mjackson

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

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

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

mjackson

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