https://github.com/braisc/react-text-typist
React component that simulates human typing on a keyboard.
https://github.com/braisc/react-text-typist
npm-package react react-component react-library typescript typing-animation typing-effect
Last synced: 6 months ago
JSON representation
React component that simulates human typing on a keyboard.
- Host: GitHub
- URL: https://github.com/braisc/react-text-typist
- Owner: BraisC
- Created: 2020-10-14T15:15:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-03T16:02:47.000Z (over 2 years ago)
- Last Synced: 2025-07-15T03:45:45.067Z (7 months ago)
- Topics: npm-package, react, react-component, react-library, typescript, typing-animation, typing-effect
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-text-typist
- Size: 1.08 MB
- Stars: 34
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React-Text-Typist
[](https://www.npmjs.com/package/react-text-typist)
[](https://www.npmjs.com/package/react-text-typist)
[](https://www.npmjs.com/package/react-text-typist)
[](https://www.npmjs.com/package/react-text-typist)
[](https://reactjs.org/)
[](https://reactjs.org/)
A simple React component to create typing animations with multiple sentences.
I you need a typing effect on your app this package may be what you need :)
## Install
```shell
npm install react-text-typist --save
```
## Demos
### Demo Website
## Basic Usage
```jsx
import React from 'react';
import Typist from 'react-text-typist';
export default App() => {
return (
);
}
```
## Props
Typist accepts some props to customize the component behaviour:
| Property | Type | Default | Description | Required |
| :--------------: | :-----------: | :----------------: | :----------------------------------------: | :------: |
| sentences | string[] | | Array of sentences to type | yes |
| className | string | | Classname to customize component | no |
| cursorClassName | string | | Classname to customize cursor | no |
| cursorBlinkSpeed | string | 700 (ms) | Duration of cursor blink animation | no |
| cursorColor | string | | Color of cursor | no |
| cursorSmooth | boolean | false | Cursor smooth animation | no |
| showCursor | boolean | true | Hide or show cursor | no |
| typingSpeed | number | 80 (ms) | Typing speed (ms between each character) | no |
| deletingSpeed | number | 30 (ms) | Deleting speed (ms between each character) | no |
| pauseTime | number | 1000(ms) | Pause between sentences | no |
| startDelay | number | 0(ms) | Delay before start typing | no |
| cursorDelay | number | same as startDelay | Delay before showing cursor for first time | no |
| loop | boolean | true | Choose if you want infinite loop | no |
| style | CSSProperties | {} | Inline CSS to apply to the component | no |
| defaultText | string | '' | Default text to render, useful with SSR | no |
| onTypeFinish | Function | | Callback when finished typing | no |
## Customization
You can apply your own class to the text and the cursor using the 'className' prop. Also you can select the cursor in CSS via the 'typist-cursor' class or you can apply your own class just to the cursor using the 'cursorClassName' prop.
```jsx
export default App() => {
return (
);
}
```
```css
/* Default cursor class */
.typist-cursor {
font-size: 16px;
color: red;
}
/* This will apply to text and cursor */
.myTypist {
font-size: 16px;
color: red;
}
/* This will apply only to cursor */
.myCursor {
font-size: 16px;
color: red;
}
```
The component is also compatible with libraries like 'styled-components':
```jsx
import React from 'react';
import Typist from 'react-text-typist';
import styled, { createGlobalStyle } from 'styled-components';
const StyledTypist = styled(Typist)`
font-size: 4rem;
color: blue;
`;
export default App() => {
return (
);
}
```