https://github.com/sgwilym/windups

A unique typewriter effect library for React.
https://github.com/sgwilym/windups

animation javascript react reactjs typewriter typewriter-effect windups

Last synced: about 2 months ago
JSON representation

A unique typewriter effect library for React.

• Host: GitHub
• URL: https://github.com/sgwilym/windups
• Owner: sgwilym
• License: mit
• Created: 2019-08-22T15:45:28.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-19T09:41:24.000Z (11 months ago)
• Last Synced: 2024-07-17T01:32:46.077Z (2 months ago)
• Topics: animation, javascript, react, reactjs, typewriter, typewriter-effect, windups
• Language: TypeScript
• Homepage: https://windups.gwil.co
• Size: 2.32 MB
• Stars: 870
• Watchers: 5
• Forks: 17
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# windups

🐸 [Examples, guides, API docs, and more! Much of it presented by a talking frog!](https://windups.gwil.co)

---

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:

```jsx

import { useWindup } from "windups";

function MyWindup() {

  const [text] = useWindup(

    "This string will be rendered character by character!"

  );

  return 
{text}
;

}

```


For pretty much everything else:

```jsx

import { WindupChildren } from "windups";

function MyWindup() {

  return (

    

      {"It's fun to do"}

      {"wild"}

      {"stuff with text!"}

    

  );

}

```

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