windups

A unique typewriter effect library for React.

sgwilym/windupswindups.gwil.cowindups

README

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:

  1. ``` js
  2. import { useWindup } from "windups";

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

  9.   return <div>{text}</div>;
  10. }
  11. ```

For pretty much everything else:

  1. ``` js
  2. import { WindupChildren } from "windups";

  4. function MyWindup() {
  5.   return (
  6.     <WindupChildren>
  7.       {"It's fun to do"}
  8.       <em>{"wild"}</em>
  9.       {"stuff with text!"}
  10.     </WindupChildren>
  11.   );
  12. }
  13. ```

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