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

Property	Corresponding Animation Property	Data Type	Default Value	Property Unit
animationname	animation-name	String	"blur"	-
duration	animation-duration	String	"1s"	s or ms
delay	animation-delay	String	"0s"	s or ms
direction	animation-direction	String	"alternate"	-
timing	animation-timing-function	String	"ease"	-
iteration	animation-iteration-count	Number String	"infinite"	-
fillMode	animation-fill-mode	String	"none"	-

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

 

Fold	Hang	Zoom	Pop
fold	hangOnLeft	zoomIn	popIn
unfold	hangOnRight	zoomOut	popOut

 

Rotate	Shake	Squeeze
rotateSlowDown	shakeMix	squeezeMix
rotateCW	shakeHorizontal	squeezeHorizontal
rotateACW	shakeVertical	squeezeVertical

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