https://github.com/harshal0902/typewriting-animation
⌨ A lightweight customizable typewriter animation JavaScript library.
https://github.com/harshal0902/typewriting-animation
animation hacktoberfest hacktoberfest-accepted javascript react typescript typewriter-animation
Last synced: about 2 months ago
JSON representation
⌨ A lightweight customizable typewriter animation JavaScript library.
- Host: GitHub
- URL: https://github.com/harshal0902/typewriting-animation
- Owner: Harshal0902
- License: mit
- Created: 2022-04-06T18:51:11.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T19:10:42.000Z (over 1 year ago)
- Last Synced: 2025-03-13T05:36:13.042Z (2 months ago)
- Topics: animation, hacktoberfest, hacktoberfest-accepted, javascript, react, typescript, typewriter-animation
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/typewriting-animation
- Size: 329 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# typewriting-animation
A customizable and lightweight typewriter animation JavaScript library that allows you to add your own custom characters, control the speed of the animation, control the delay between each character, and control the looping of the animation to decide the type of cursor to use.
- [Features](#features)
- [Build using](#build-using)
- [Getting Started](#getting-started)
- [NPM](#npm)
- [Usage](#usage)
- [React](#usage-react)
- [Bug Reporting](#bug-reporting)
- [Feature Request](#feature-request)
- [Release Notes](#release-notes)
- [License](#license)
## 🚀 Features
Customizable typewriter animation with the following features:
- Add your own custom characters
- Control the speed of the animation
- Control the delay between each character
- Control the looping of the animation
- Decide the type of cursor to use
## ⚙️ Build using
- TypeScript
- npm
- Gulp
- Rollup
## 📦 Getting Started
### NPM
#### Installation
```bash
npm i typewriting-animation
```
## 🔨 Usage
### React
```javascript
import React from 'react';
import { useTypewriterEffect } from 'typewriting-animation';
function App() {
const {
typedString,
selectedString,
} = useTypewriterEffect(
[
"add your own custom characters",
"control the speed of the animation",
"control the delay between each character",
"control the looping of the animation",
"decide the type of cursor to use",
],
// Otpional for customizing the animation
{
speed: 30, // Set your desired animation speed in milliseconds
delay: 2000, // Set the delay between sentences in milliseconds
loop: false, // Set to true if you want the animation to loop
cursor: '_', // Set your desired cursor character
}
);
return (
typewriting-animation allows you to {typedString}
);
}
export default App;
```
## 🐛 Bug Reporting
Feel free to [open an issue](https://github.com/Harshal0902/typewriting-animation/issues) on GitHub if you find any bug.
## ⭐ Feature Request
- Feel free to [Open an issue](https://github.com/Harshal0902/typewriting-animation/issues) on GitHub to request any additional features you might need for your use case.
## 📋 Release Notes
Check [here](https://github.com/Harshal0902/typewriting-animation/releases) for release notes.
## 📜 License
This software is open-source, licensed under the [MIT License](https://github.com/Harshal0902/typewriting-animation/blob/main/LICENSE).
[](https://github.com/Harshal0902)