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.
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
- TypeScript
- npm
- Gulp
- Rollup
npm i typewriting-animationimport 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 (
<div>
<div className="blinking-cursor" aria-label={selectedString}>
typewriting-animation allows you to {typedString}
</div>
</div>
);
}
export default App;Feel free to open an issue on GitHub if you find any bug.
- Feel free to Open an issue on GitHub to request any additional features you might need for your use case.
Check here for release notes.
This software is open-source, licensed under the MIT License.
