Primitives / foldkit-primitives
Find one by the job
| You want to | Reach for | In |
|---|---|---|
| Follow the color scheme, reduced motion or any media query | MediaQuery, PrefersDark, PrefersReducedMotion | media |
| Change the layout at named widths | Breakpoints | media |
| Know whether the tab is visible, the window's size, or the user idle | Visibility, WindowSize, Idle | events |
| Answer keyboard shortcuts | keyboardEvents with matchHotkey | events |
| Count ticks, or run something on an interval | Timer, Interval, ticks | time |
| Wait until typing stops, or limit how often something runs | debounce, Throttle | time |
| Say "3 minutes ago" | formatRelativeTime | time |
| Page through a list | Pagination, range | state |
| Undo and redo | history | state |
| Draw only the visible rows of a long list | Virtual | state |
| Animate a value, or let an element leave before it is removed | Tween, Spring, Presence | motion |
| Move with arrow keys through a toolbar, list, grid or tree | RovingTabindex, ListNavigation, GridNavigation, TreeNavigation | interaction |
| Close a popup on Escape or an outside press | DismissLayer, Overlay | interaction |
| Press, long-press or drag | Press, LongPress, Move, PointerDrag | interaction |
| Edit text in place | EditableText | interaction |
| Tell a screen reader what changed | LiveAnnounce | interaction |
| Know whether the browser is online, or talk over a socket | Online, websocket, sse | net |
| Talk between tabs | broadcastMessages, SharedHost | net |
| Use the camera, the location or a permission | mediaStream, Geolocation, permissions | device |
| Track one element's size or visibility | Resize, Intersection, Bounds | observers |
| Focus, mask or keep an element in view | Autofocus, InputMask, KeepInView | dom |
| Copy, share, load a script or restore scroll | copyText, share, loadScript, keepScroll | dom |
Working widgets built from the interaction primitives are listed under In the examples.