windups

A typewriter effect library for React, with hook and component APIs.
GitHub
872
Created 5 years ago, last commit a year ago
5 contributors
62 commits
Stars added on GitHub, month by month
0
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
+0.1
/day
Package on NPM
windups
1.2.2
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
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:

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