windups

🐸 Examples, guides, API docs, and more! Much of it presented by a talking frog!

---

A unique typewriter (or, ahem, "windup") effect library for React.

This effect can be applied to strings _or pretty anything you can put in React's children prop_.

What's it look like?

For strings:

``jsx
import { useWindup } from "windups";

function MyWindup() {
const [text] = useWindup(
"This string will be rendered character by character!"
);

return

;
}
`

For pretty much everything else:

`jsx
import { WindupChildren } from "windups";

function MyWindup() {
return (

{"It's fun to do"}
{"wild"}
{"stuff with text!"}

);
}
``

There are additional APIs for:

- Controlling the pacing of the text!
- Adding pauses!
- Firing effects (e.g. when each character is typed, or at arbitrary points)!
- Ahead of render-time line-breaking!

---

Want to see a codebase that makes extensive, real-word use of this package? Source for the docs site is at https://github.com/sgwilym/windups-docs