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
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
View sas.md

Electives


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(() => {
document.activeElement.blur();
document.body.focus();
View auth.machine.js
import { Machine, assign } from "xstate";
import firebase from "./firebase";
const chart = {
id: "auth",
context: {
auth: null,
error: null,
loggedoutTime: null
},
View resources.js
import firebase from "./firebase";
import { createResource } from "./createResource";
const Doc = createResource(path =>
firebase
.firestore()
.doc(path)
.get()
.then(unwrapDoc)
);
View createResource.js
import React from "react";
import { Link } from "react-router-dom";
export function createResource(getPromise) {
let cache = {};
let inflight = {};
let errors = {};
function load(key) {
inflight[key] = getPromise(key)
View auth.machine.js
import { Machine, assign } from 'xstate';
import firebase from './firebase';
const chart = {
id: 'auth',
context: {
auth: null,
error: null,
loggedoutTime: null
},
View blah.js
const users = [];
// What is the button label?
// 1. button.props.children, can server render
// What is the option's value?
// 1. option.props.value, that's it, it's required, no fancy children stuff
// if we require controlled
// - they know the value all the time before we even show up
View listbox.md

ListBox

Screen Shot 2019-11-22 at 12 23 31 PM

Listbox seems to have all of the constraints in one component. Making a decision here is likely to be easily expanded to the rest of the components. It has all the tricky parts we're dealing with right now:

  • Index based focus management
  • Children needing their index to render
  • Parent/sibling component needing props from a sibling
  • Case for SSR support
You can’t perform that action at this time.