// 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
/ 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 hidden or 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 hidden or 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
| ## _/_/_/ _/ _/ _/_/ _/ _/ _/_/_/ _/_/_/_/ | |
| ## _/ _/ _/ _/ _/ _/_/ _/ _/ _/ | |
| ## _/ _/_/_/_/ _/_/_/_/ _/ _/ _/ _/ _/_/_/ | |
| ## _/ _/ _/ _/ _/ _/ _/_/ _/ _/ | |
| ## _/_/_/ _/ _/ _/ _/ _/ _/ _/_/_/ _/_/_/_/ | |
| ## | |
| ## _/_/_/_/_/ _/ _/ _/_/_/_/ | |
| ## _/ _/ _/ _/ | |
| ## _/ _/_/_/_/ _/_/_/ | |
| ## _/ _/ _/ _/ |
This file contains hidden or 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() |
chaance
/ machine.js
Last active
November 8, 2019 21:09
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or 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) |
chaance
/ machine.js
Last active
January 4, 2020 05:32
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or 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
/ useFocusChange.js
Created
February 28, 2020 20:46
Detect when focus changes in your React app
This file contains hidden or 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
/ tooltip.test.js
Created
March 13, 2020 19:01
Debugging the act warning in Jest + React Testing Library
This file contains hidden or 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 />", () => { |
This file contains hidden or 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 useDebounce<F extends Function>( | |
| func: F, | |
| delay: number, | |
| immediate?: boolean | |
| ) { | |
| let debouncedFunc = useRef(func); | |
| useEffect(() => { | |
| let timeout: number | null; | |
| debouncedFunc.current = (((...args: any[]) => { | |
| let callNow = immediate && timeout == null; |
chaance
/ emotion.d.ts
Last active
May 5, 2020 15:59
Overriding the default theme types in Emotion 11
This file contains hidden or 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
| // this goes in you root types directory, filename is the [name-of-your-module].d.ts | |
| import '@emotion/react'; | |
| import { MyCustomTheme } from './theme'; | |
| declare module '@emotion/react' { | |
| export interface Theme extends MyCustomTheme {} | |
| } |