Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/notadamking/react-typing-animation
A fully-featured typing animation in React that supports any valid JSX.
https://github.com/notadamking/react-typing-animation
Last synced: 1 day ago
JSON representation
A fully-featured typing animation in React that supports any valid JSX.
- Host: GitHub
- URL: https://github.com/notadamking/react-typing-animation
- Owner: notadamking
- Created: 2017-05-04T08:35:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T18:07:04.000Z (over 1 year ago)
- Last Synced: 2024-11-08T22:36:40.885Z (6 days ago)
- Language: JavaScript
- Homepage: https://adamjking3.github.io/react-typing-animation-example/
- Size: 17.5 MB
- Stars: 266
- Watchers: 4
- Forks: 42
- Open Issues: 32
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React-typing-animation
[](https://npm.im/react-typing-animation) 
> A fully-featured typing animation in React that supports any valid JSX.
## Motivation
There were other JS typing animations that existed when I created this, but they were all lacking in robust features. This component aims to support all of the following features:
✅ Type text from any valid JSX
✅ Preserve DOM structure/styling
✅ Change typing speed anywhere in tree
✅ Add a delay anywhere in tree
✅ Backspace animation
✅ Reset lines / full tree
✅ Loop functionality
✅ No dependencies (CSS or JS)
## Demo
View the [live demo](https://adamjking3.github.io/react-typing-animation-example/)
**or**
```shell
git clone https://github.com/adamjking3/react-typing-animation
cd react-typing-animation
npm install
npm start
```
Then open http://localhost:3000/ in a browser.
**Feature requests and pull requests welcome**
## Installation
```shell
npm i --save react-typing-animation
```
## Usage
```jsx
import Typing from 'react-typing-animation';
const AnimatedTypingComponent = () => (
This span will get typed.
);
```
## Documentation
| Property | Type | Default | Required |
| :--------------: | :--------: | :--------------------------------------------------------------------------------------------: | :------: |
| element | string | div | no |
| children | React node | | yes |
| className | string | | no |
| cursorClassName | string | | no |
| cursorElement | string | span | no |
| cursor | React node | [``](https://github.com/adamjking3/react-typing-animation/blob/master/src/Cursor.js) | no |
| hideCursor | boolean | false | no |
| speed | number | 50 (ms) | no |
| startDelay | number | 0 (ms) | no |
| loop | boolean | false | no |
| onStartedTyping | function | () => {} | no |
| onBeforeType | function | () => {} | no |
| onAfterType | function | () => {} | no |
| onFinishedTyping | function | () => {} | no |
*Note: if `cursorElement` is set as an empty string, a React.Fragment element will be used to wrap children.*
### Backspace Component
```jsx
import Typing from 'react-typing-animation';
...
This span will get typed, then erased.
```
| Property | Type | Default | Required | Description |
| :------: | :----: | :-----: | :------: | :---------: |
| count | number | 1 | false | |
| delay | number | 0 | false | |
| speed | number | -1 | false | |
### Delay Component
```jsx
import Typing from 'react-typing-animation';
...
There will be a 1000ms delay here,
then this will be typed.
```
| Property | Type | Default | Required | Description |
| :------: | :----: | :-----: | :------: | :---------: |
| ms | number | | yes | |
### Speed Component
```jsx
import Typing from 'react-typing-animation';
...
This line will be typed at 50ms/character,
then this will be typed at 200ms/character.
```
| Property | Type | Default | Required | Description |
| :------: | :----: | :-----: | :------: | :---------: |
| ms | number | | yes | |
### Reset Component
```jsx
import Typing from 'react-typing-animation';
...
This line will stay.
This line will get instantly removed after a 500 ms delay
```
| Property | Type | Default | Required | Description |
| :------: | :----: | :-----: | :------: | :---------: |
| count | number | 0 | false | |
| delay | number | 0 | false | |
| speed | number | -1 | false | |
## Contributing
After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.
```shell
# Starts a webpack dev server that hosts the demo at http://localhost:3000
npm start
# Lints the code with eslint
npm run lint
# Lints and builds the code, placing the result in the dist directory.
npm run build
```
Pull requests are welcome!
## License
[MIT](https://github.com/adamjking3/react-typing-animation/blob/master/LICENSE)