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