// High level API
<Breadcrumbs separator={<FancyIcon />}>
<Breadcrumb as="a" href="/">Home</Breadcrumb>
<Breadcrumb as={StyledLink} href="/components">Parent</Breadcrumb>
<Breadcrumb current>Current Page</Breadcrumb>
</Breadcrumbs>
Chance Strickland chaance
🏄♂️
chaance
/ tooltip.test.js
Created
March 13, 2020 19:01
Debugging the act warning in Jest + React Testing Library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { render, fireEvent, act, screen } from "@testing-library/react"; | |
| import { axe } from "jest-axe"; | |
| import Tooltip, { LEAVE_TIMEOUT, MOUSE_REST_TIMEOUT } from "@reach/tooltip"; | |
| // TODO: Whyyyyyy are we getting the `not wrapped in act(...)` warning? | |
| // AFAICT, everything related to rendering and updating is wrapped in act. | |
| // React testing experts, what the heck are we missing here? | |
| describe("<Tooltip />", () => { |
chaance
/ useFocusChange.js
Created
February 28, 2020 20:46
Detect when focus changes in your React app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function useFocusChange( | |
| // callback (logs to console by default) | |
| // handleChange?: ( | |
| // activeElement: Element | null, | |
| // previousActiveElement: Element | null, | |
| // event?: FocusEvent | |
| // ) => void | |
| handleChange = console.log, | |
| // whether to callback on `focus` or `blur` | |
| // when?: 'focus' | 'blur' |
chaance
/ machine.js
Last active
January 4, 2020 05:32
Generated by XState Viz: https://xstate.js.org/viz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions |
chaance
/ machine.js
Last active
November 8, 2019 21:09
Generated by XState Viz: https://xstate.js.org/viz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions | |
| // - XState (all XState exports) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| set nocompatible | |
| filetype off | |
| set rtp+=~/.vim/bundle/Vundle.vim | |
| call vundle#begin() | |
| Plugin 'editorconfig/editorconfig-vim' | |
| Plugin 'jiangmiao/auto-pairs' | |
| Plugin 'leafgarland/typescript-vim' | |
| call vundle#end() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ## _/_/_/ _/ _/ _/_/ _/ _/ _/_/_/ _/_/_/_/ | |
| ## _/ _/ _/ _/ _/ _/_/ _/ _/ _/ | |
| ## _/ _/_/_/_/ _/_/_/_/ _/ _/ _/ _/ _/_/_/ | |
| ## _/ _/ _/ _/ _/ _/ _/_/ _/ _/ | |
| ## _/_/_/ _/ _/ _/ _/ _/ _/ _/_/_/ _/_/_/_/ | |
| ## | |
| ## _/_/_/_/_/ _/ _/ _/_/_/_/ | |
| ## _/ _/ _/ _/ | |
| ## _/ _/_/_/_/ _/_/_/ | |
| ## _/ _/ _/ _/ |
chaance
/ react-accordion-example.jsx
Last active
August 25, 2019 04:04
Potential API for accessible accordion React component. Inspired by @reach/tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ReactDOM from "react-dom"; | |
| import { | |
| Accordion, | |
| AccordionItem, | |
| AccordionHeader, | |
| AccordionPanel | |
| } from "./Accordion"; | |
| function App() { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function Example({ audioFile, ...props }) { | |
| return ( | |
| <div> | |
| {/* basic auidio player with normal HTML5 controls */} | |
| <RePlays src={audioFile} {...props} /> | |
| {/* basic auidio player; pick and choose your controls */} | |
| <RePlays src={audioFile}> | |
| <Scrubber /> |
chaance
/ SignUpForm.tsx
Created
May 31, 2019 23:05
React hook for breezy Firebase authentication. Uses Formik for forms and Yup for field validation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { | |
| Formik, | |
| FormikProps, | |
| Form, | |
| Field, | |
| FieldProps, | |
| ErrorMessage, | |
| } from 'formik'; | |
| import * as Yup from 'yup'; |