React Typing Dynamics

A simple and customizable React component for simulating typing animations.

NPM Package:

Installation

Using npm:

npm install react-typing-dynamics

Using yarn:

yarn add react-typing-dynamics

How 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.