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:

import { useWindup } from "windups";

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

  return <div>{text}</div>;
}

For pretty much everything else:

import { WindupChildren } from "windups";

function MyWindup() {
  return (
    <WindupChildren>
      {"It's fun to do"}
      <em>{"wild"}</em>
      {"stuff with text!"}
    </WindupChildren>
  );
}

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