A typewriter effect library for React.
Apply the typewriter (or, ahem, “windup”) effect to:
Use the API to:
Examples, API docs, and guides can all be found at the docs site!
Where the action is happening in this codebase.
src/Windup.ts
The bulk of the file are functions which return modified versions of a windup (e.g. next
, rewind
), utilities (e.g. isUnplayed
), or functions for creating a Windup data structure (e.g. windupFromString
).
The windup data structure is also described here:
src/react/useWindup.ts
This is a hook that is used internally by WindupChildren
and useWindupString
. It does the bulk of the work of a windup: scheduling the next update, triggering effects, returning callbacks for rewinding/skipping etc.
src/react/useWindupString.ts
This hook does very little: it just turns a string into a windup and passes it along to useWindup
.
src/react/WindupChildren.tsx
A lot going on in this one: transforming the children
data type into a Windup, and a rough heuristic to determine when the value of children
has ‘changed’ (big quotation marks).
Author: sgwilym
Live Demo: https://windups.gwil.co/
GitHub: https://github.com/sgwilym/windups
#react #reactjs #javascript