Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 days 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 (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-19T09:41:24.000Z (over 1 year ago)
- Last Synced: 2025-01-18T02:11:46.116Z (9 days ago)
- Topics: animation, javascript, react, reactjs, typewriter, typewriter-effect, windups
- Language: TypeScript
- Homepage: https://windups.gwil.co
- Size: 2.32 MB
- Stars: 874
- Watchers: 5
- Forks: 18
- 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