windups
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

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

Package Sidebar

Install

npm i windups

Weekly Downloads

1,505

Version

1.2.2

License

MIT

Unpacked Size

262 kB

Total Files

39

Last publish

Collaborators

  • sgwil