Skip to content

Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

Block or report user

Report or block ryanflorence

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View machine.js
const fetchMachine = Machine({
id: 'fetch',
initial: 'home',
states: {
home: {
on: {
target: 'dashboard',
actions: 'recordLoginTime'
View useNavFocus.js
// Focus Management
// Cases:
// 1. Navigate to sibling:
// [a] => [b*] : focus b
// [a, x, y] => [b*] : focus b
// 2. Navigate to child
// [a] => [a, b*] : focus b
View Expletives.jsx
function Expletives({ children }) {
let [, forceUpdate] = useState();
let mounted = useRef(false);
useEffect(() => {
mounted.current = true;
// don't want to cause any seizures.
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
View App.js
import React from "react"
import { Link, useRoutes, Outlet } from "react-router-dom"
function App() {
const el = useRoutes([
{ path: "/", element: <div>index</div> },
path: ":courseId",
element: (
View poke.js
function PokemonInput({ defaultValue, onChange }) {
const [pokémon, setPokémon] = useState("pikachu")
const [img, setImg] = useState()
const [error, setError] = useState(null)
useEffect(() => {
let isCurrent = true
.then(res => res.json())
.then(res => {
View machine.js
let game = Machine({
id: 'game',
initial: 'idle',
context: {
addends: [],
completions: [],
selections: []
states: {
idle: {
View blah.js
Gatsby doesn't need reach or react router
it needs `useLocation`
- It doesn't use the route matching algorithm
- It doesn't use nesting (it's just one bit splat route)
- It doesn't even use Link
- All it's really using is the location to know about changes


This group is great for people building shared component libraries:

Compound Components

The foundation of all reusable components in React. Once you understand this concept, your components will be able to work in UIs you aren't even thinking about yet.

View focus.js
export function useBodyFocusOnNav() {
const { location } = useLocation();
// TODO: figure out why only "root links" seem to reset the tab order. Right
// now, in the demo app, the global links are blurred on navigation, but the
// nested links are not (?) The focus does move to the body when I "watch
// expression" in the dev tools, but the tabbing doesn't seem to be affected.
// maybe could try to find data-reach-skip-nav and focus that if it's there?
useEffect(() => {
View auth.machine.js
import { Machine, assign } from "xstate";
import firebase from "./firebase";
const chart = {
id: "auth",
context: {
auth: null,
error: null,
loggedoutTime: null
You can’t perform that action at this time.