# react-style-text

> revival of react-moving-text with typescript

Latest version **0.2.8** (published 2023-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-style-text
pnpm add react-style-text
yarn add react-style-text
bun add react-style-text
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.8 |
| Published | 2023-12-24 |
| First published | 2023-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 86.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | andrew87e |
| Maintainers | andrew87e |

## Links

- npm: https://www.npmjs.com/package/react-style-text
- Repository: https://github.com/Andrew87E/react-style-text
- Homepage: https://andrew87e.github.io/react-style-text
- Issues: https://github.com/Andrew87E/react-styled-text/issues
- npm.io page: https://npm.io/package/react-style-text

## Recent versions

- 0.2.8 (latest) — 2023-12-24
- 0.2.7 — 2023-12-24
- 0.2.6 — 2023-12-24
- 0.2.5 — 2023-12-24
- 0.2.4 — 2023-12-23
- 0.2.3 — 2023-12-23
- 0.2.2 — 2023-12-23
- 0.2.1 — 2023-12-23
- 0.2.0 — 2023-12-23
- 0.1.28 — 2023-12-23
- 0.1.27 — 2023-12-23
- 0.1.26 — 2023-12-23
- 0.1.25 — 2023-12-23
- 0.1.24 — 2023-12-23
- 0.1.23 — 2023-12-23
- … 22 more at https://npm.io/package/react-style-text/versions

## README

# react-style-text

[![Tests](https://github.com/Andrew87E/react-style-text/actions/workflows/test.yml/badge.svg)](https://github.com/Andrew87E/react-style-text/actions/workflows/test.yml)
[![Release](https://github.com/Andrew87E/react-style-text/actions/workflows/release.yml/badge.svg)](https://github.com/Andrew87E/react-style-text/actions/workflows/release.yml)
[![npm version](https://badge.fury.io/js/react-style-text.svg)](https://badge.fury.io/js/react-style-text)

<!-- [![npm](https://img.shields.io/npm/dt/react-style-text.svg)](https://www.npmjs.com/package/react-style-text) -->

[![npm](https://img.shields.io/npm/l/react-style-text.svg)](https://www.npmjs.com/package/react-style-text)

React Component to show animated text and objects, built with [styled-components](https://www.styled-components.com/).

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

<!-- **View [Demo and Playground](https://andrew87e.github.io/react-style-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.

```jsx
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          |                  |                      |                   |

&nbsp;

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

&nbsp;

| 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.

```jsx
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.

```jsx

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](https://github.com/Andrew87E/Horiseon-Marketing/blob/main/LICENSE)

MIT © [Andrew Edwards](https://github.com/andrew87e)

---
_Source: https://npm.io/package/react-style-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._