as-typing-effect

A React component for animated text with dynamic colors and custom settings.

Installation

You can install this package via NPM:

npm install as-typing-effect

Basic Usage

To use as-typing-effect, import the component and pass the desired props. Below are examples showing how to implement it with different settings.

Example Code:

import React from "react";
import ASTypingEffect from "as-typing-effect";

function App() {
  return (
    <div className="App">
      {/* Example with random colors enabled */}
      <ASTypingEffect
        staticText="Hello"
        dynamicTexts={["World!", "Everyone!"]}
        speed={150}
        pause={1000}
        YourColor="#fff" // You can set your static text color (e.g Hello)
        dynamicColor="#FF6347" // Custom color for DynamicText text
        useRandomColors={true} // Enable random colors
      />

      {/* Example with random colors disabled */}
      <ASTypingEffect
        staticText="Welcome"
        dynamicTexts={["Back!", "Here!"]}
        speed={200}
        pause={1200}
        YourColor="#fff" // You can set your static text color (e.g Hello)
        dynamicColor="#FF6347" // Custom color for DynamicText text
        useRandomColors={false} // Disable random colors
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ----------------- | -------- | ----------- | ------------------------------------------------------------- | | staticText | string | - | The static part of the text (required). | | dynamicTexts | array | - | Array of dynamic texts to animate (required). | | speed | number | 150 | Speed of the text animation in milliseconds. | | pause | number | 1000 | Pause duration between dynamic text transitions. | | YourColor | string | null | Custom color for the static text. | | useRandomColors | bool | true | Enable or disable random colors for dynamic text. | | dynamicColor | string | "#000000" | Default color for dynamic text if random colors are disabled. |

License

MIT