Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,965
typescript (11,291
react (5,392
reactjs (1,081
animation (1,050