react-style-text v0.2.8

react-style-text

React Component to show animated text and objects, built with styled-components.

The Component provides regular animation for common object and some animation effects especially for typography like letters and multi-line text.

Installation

Install via npm:

npm i react-style-text

Install via yarn:

yarn add react-style-text

Usage

To use react-style-text in your react project, wrap the content with a AnimatedComponent or TypeWriter component and customize the animation with relevant properties.

import React from "react";
import { AnimatedComponent, Typewriter } from "react-style-text";

export const MyAnimatedTypo = () => {
  return (
    <AnimatedComponent
      animationname="animation_type"
      duration="1000ms"
      delay="0s"
      direction="normal"
      timing="ease"
      iteration="infinite"
      fillMode="none"
    >
      Content...
    </AnimatedComponent>
  );
};

export const MyTypewriter = () => {
  return (
    <Typewriter
      datatext={["Hello World!", "Hello React!"]}
      cursorcolor="green"
      statictext="Example Text"
    />
  );
};

Available properties

Available animations

• For entity object and letters

  Common effects	Fade	Flip	Slide
  blur	fadeIn	flip	slideInFromLeft
  bounce	fadeInFromLeft	flipIn	slideInFromRight
  effect3D	fadeInFromRight	flipOut	slideOutToLeft
  flash	fadeInFromTop	flipSlowDown	slideOutToRight
  float	fadeInFromBottom	flipFromTop	slideInFromTop
  glowing	fadeOut	flipToTop	slideInFromBottom
  jelly	fadeOutToLeft	flipFromBottom	slideOutToTop
  pulse	fadeOutToRight	flipToBottom	slideOutToBottom
  shadow	fadeOutToTop	flipFromLeftToCenter
  spin	fadeOutToBottom
  swing

Chain Animation

A string array of animation names used to wrap the animations you want to chain.

import React, { useState } from "react";
import {AnimatedComponent} from "react-style-text";

const AnimationsForChaining = [
  "swing",
  "flipSlowDown",
  "fadeOutToBottom",
  "jelly",
];

const AnimationChain = () => {
  const [animationIndex, setAnimationIndex] = useState(0);
  const [animationType, setAnimationType] = useState(AnimationsForChaining[0]);

  const handleChainAnimation = () => {
    setCounter(animationIndex + 1);
    setAnimationType(selectedItems[animationIndex + 1]);
  };

  return (
    <AnimatedComponent
      onAnimationEnd={handleChainAnimation}
      animationname={animationType}
      duration="1000ms"
      timing="linear"
      iteration={1}
    >
      AnimatedComponent
    </AnimatedComponen
  );
};

Typewriter Animation

A string array of animation names used to wrap the animations you want to chain.

import React, { useState } from "react";
import { Typewriter } from "react-style-text";

const MyTypewriter = () => {
  const [text, setText] = useState<string[]>(["Hello World!", "Hello React!"]);

  return (
    <Typewriter
      dataText={text}
      cursorcolor="green"
      statictext="Example Text"
    />
  );
};

License

MIT © Andrew Edwards