1.1.2 • Published 2 years ago
react-typing-dynamics v1.1.2
React Typing Dynamics
A simple and customizable React component for simulating typing animations.
NPM Package:
Installation
Using npm:
npm install react-typing-dynamicsUsing yarn:
yarn add react-typing-dynamicsHow to use
Here's a basic example of how to use the TextAnimation component from react-typing-dynamics:
import React from 'react';
import TextAnimation from 'react-typing-dynamics';
const App = () => {
const phrases = ['Hello, World!', '<h1>Welcome to my website.</h1>', 'Enjoy your stay!'];
return (
<TextAnimation
phrases={phrases}
typingSpeed={200}
backspaceDelay={50}
eraseDelay={1000}
timeComplete={3000}
errorProbability={0.1}
isSecure={true}
/>
);
};
export default App;Props
| Prop Name | Type | Description |
|---|---|---|
phrases | string[] | An array of phrases to be typed. Can be HTML or String |
typingSpeed | number | The typing speed in characters per second. |
backspaceDelay | number | The delay in milliseconds before the text starts to be erased. |
eraseDelay | number | The delay in milliseconds between each character erasing. |
timeComplete | number | The delay in milliseconds before the typing animation restarts. |
errorProbability | number | The probability (between 0 and 1) of a typing error happening. |
isSecure | boolean | If true, the text is sanitized with sanitize-html. |
eraseOnComplete | boolean | If true, the text is deleted when finish writing. |
License
This project is licensed under the MIT License - see the LICENSE file for details.