supertext-react

Supertext-react

Supertext-react is a versatile React component library that provides three unique text animation and display components: TypingText, LastWordTypingText, and Marquee. With Supertext-react, you can effortlessly add captivating text effects to your web applications. This README will guide you through how to use each component and explain the available props and their functionalities.

Table of Contents

• Installation
• Usage
  • TypingText
  • LastWordTypingText
  • Marquee
• Examples

Installation

To use Supertext-react in your project, you can install it via npm or yarn:

npm install Supertext-react

or

yarn add Supertext-react

Usage

TypingText

TypingText is a component that simulates typing animation. It progressively displays text from an array with optional customization.

import React from 'react';
import { TypingText } from 'Supertext-react';

function MyComponent() {
  const texts = ["Hello, world!", "This is Supertext-react.", "Enjoy the animations!"];

  return (
    <TypingText
      textArray={texts}
      typingSpeed={50} // Speed of typing in milliseconds per character
      loop={true} // Loop through the textArray
      fontSize="24px"
      fontWeight="bold"
      color="black"
      className="custom-typing-text"
      triggerOnce={true} // Only trigger once on initial render
    />
  );
}

Props for TypingText Component:

• textArray (Array):

  • An array of strings that represent the text to be displayed and typed out.

• typingSpeed (Number):

  • The speed at which each character is typed in milliseconds. Smaller values make it faster.

• loop (Boolean):

  • Determines whether the animation should loop through the textArray once it reaches the end.

• fontSize (String):

  • Sets the font size of the displayed text.

• fontWeight (String):

  • Sets the font weight of the displayed text.

• color (String):

  • Sets the color of the text.

• className (String):

  • Adds a custom CSS class name to the outer div of the component for styling.

• triggerOnce (Boolean):

  • Determines whether the animation should trigger only once when the component comes into view.

LastWordTypingText

LastWordTypingText is a component that types out the last word in a sentence, providing a unique effect.

import React from 'react';
import { LastWordTypingText } from 'Supertext-react';

function MyComponent() {
  return (
    <LastWordTypingText
      text="This is a simple example."
      typingSpeed={150}
      loop={false}
      lastWords={["example.", "component.", "effect.", "features."]}
      fontSize="24px"
      fontWeight="bold"
      color="blue"
      className="custom-text"
    />
  );
}

Props for LastWordTypingText Component:

• text (String):

  • The initial text before the last word that will be typed.

• typingSpeed (Number):

  • The speed at which each character of the last word is typed in milliseconds.

• lastWords (Array):

  • An array of words. The component will type out each word sequentially from this array.

• loop (Boolean):

  • Determines whether the animation should loop through the lastWords once it reaches the end.

• fontSize (String):

  • Sets the font size of the displayed text.

• fontWeight (String):

  • Sets the font weight of the displayed text.

• color (String):

  • Sets the color of the text.

• className (String):

  • Adds a custom CSS class name to the outer div of the component for styling.

Marquee

Marquee is a component that creates a scrolling text effect.

import React from 'react';
import { Marquee } from 'Supertext-react';

function MyComponent() {
  return (
    <Marquee
      text="This is a scrolling text."
      speed={1} // Speed of scrolling (higher value means slower)
      fontSize="24px"
      fontWeight="bold"
      color="blue"
      className="custom-marquee"
      pauseOnHover={true} // Pause scrolling on hover
      scrolldirection="right" // Direction of scrolling ('right' or 'left')
    />
  );
}

Props for Marquee Component:

• text (String):

  • The text that will scroll horizontally within the component.

• speed (Number):

  • The speed of the scrolling text. A higher value means slower scrolling.

• fontSize (String):

  • Sets the font size of the displayed text.

• fontWeight (String):

  • Sets the font weight of the displayed text.

• color (String):

  • Sets the color of the text.

• className (String):

  • Adds a custom CSS class name to the outer div of the component for styling.

• pauseOnHover (Boolean):

  • Determines whether the scrolling animation should pause when the mouse hovers over the component.

• scrolldirection (String):

  • Defines the direction of text scrolling. It can be either "right" or "left".

These props allow you to customize the behavior and appearance of each Supertext-react component according to your specific requirements.

Examples

For more examples and usage details, you can refer to the demo link procided bellow.

Enjoy using Supertext-react to add engaging text animations and effects to your React applications! If you encounter any issues or have suggestions for improvement, please feel free to open an issue on the GitHub repository.