https://github.com/maxeth/react-type-animation
A React typewriter animation based on typical with extended functionality and customization.
https://github.com/maxeth/react-type-animation
css react react-component reactjs typewriter typewriter-animation typewriter-effect typical typing-animation
Last synced: about 1 month ago
JSON representation
A React typewriter animation based on typical with extended functionality and customization.
- Host: GitHub
- URL: https://github.com/maxeth/react-type-animation
- Owner: maxeth
- License: mit
- Created: 2021-04-14T17:04:29.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-12T15:29:14.000Z (over 1 year ago)
- Last Synced: 2025-09-22T02:28:42.457Z (5 months ago)
- Topics: css, react, react-component, reactjs, typewriter, typewriter-animation, typewriter-effect, typical, typing-animation
- Language: TypeScript
- Homepage: https://react-type-animation.netlify.app/
- Size: 1.64 MB
- Stars: 472
- Watchers: 1
- Forks: 24
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-type-animation
[][npm_url]
[][npm_url]
[][npm_url]
A customizable React typing animation component.
[npm_url]: https://www.npmjs.org/package/react-type-animation
## Installation
```bash
npm install react-type-animation
```
or
```bash
yarn add react-type-animation
```
Requires a `react` and `react-dom` version of at least `15.0.0`.
## Live Demo
A live demo and usage examples of the animation can be found at [https://react-type-animation.netlify.app/examples](https://react-type-animation.netlify.app/examples).
## Usage
A common typewriter animation for a landing page could look like this:
```jsx
import { TypeAnimation } from 'react-type-animation';
const ExampleComponent = () => {
return (
);
};
```
## Documentation
The docs with props, options and common problem solutions can be found at: [https://react-type-animation.netlify.app/](https://react-type-animation.netlify.app/).
## Migrating to v3
The default wrapper is now `` instead of ``: **To migrate**, add a `display: inline-block/block` or `wrapper="div"` to all `` occurances with unspecified wrapper.
## Usage Notes
### Immutability
Due to the nature of the animation, this component is **permanently memoized**, which means that the component **never** re-renders unless you hard-reload the page, and hence **props changes will not be reflected**.
### Hot Reload NOT Supported
Because the TypeAnimation component is memoized and **never** re-rendered (see above), yet Hot Reload attempts to re-render the component, **changes to the TypeAnimation component will not render until you hard-reload the page**.
Hence, whenever you make changes to the TypeAnimation component, you unfortunately have to reload your page.
## Props
See [https://react-type-animation.netlify.app/options](https://react-type-animation.netlify.app/options) for more details.
| Prop | Required | Type | Example | Description | Default |
| ----------------------- | -------- | -------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `sequence` | yes | Array void | Promise)> | `['One', 1000, 'Two', () => console.log("done")]` | Animation sequence: [TEXT, DELAY-MS, CALLBACK] | `-` |
| `wrapper` | no | string | `p`,`h2`,`div`, `strong` | HTML element tag that wraps the typing animation | `span` |
| `speed` | no | 1,2,..,99 | {type: "keyStrokeDelayInMs", value: number} | `45`, `{type: "keyStrokeDelayInMs", value: 100}` | Speed for the writing of the animation | `40` |
| `deletionSpeed` | no | 1,2,..,99 | {type: "keyStrokeDelayInMs", value: number} | `45`, `{type: "keyStrokeDelayInMs", value: 100}` | Speed for deleting of the animation | `speed` |
| `omitDeletionAnimation` | no | boolean | `false`, `true` | If true, deletions will be instant and without animation | `false` |
| `repeat` | no | number | `0`, `3`, `Infinity` | Amount of animation repetitions | `0` |
| `cursor` | no | boolean | `false`, `true` | Display default blinking cursor css-animation | `true` |
| `preRenderFirstString` | no | boolean | `false`, `true` | If true, the first string of your sequence will not be animated and initially (pre-)rendered | `true` |
| `className` | no | string | `custom-class-name` | HTML class name applied to the wrapper to style the text | `-` |
| `style` | no | object | `{fontSize: '2em'}` | JSX inline style object | `-` |
| `ref` | no | HTMLElement | null | `-` | `-` | `-` |
| `splitter` | no | (text: string) => Array | `(str) => new GraphemeSplitter().splitGraphemes(str)` | Used for splitting complex characters, see [grapheme-splitter](https://github.com/orling/grapheme-splitter) for more details | `String.split('')` |
---
[npm](https://www.npmjs.com/package/react-type-animation) / [github](https://github.com/maxeth/react-type-animation/)
Credits: [typical](https://github.com/camwiegert/typical)