https://github.com/jason89521/react-typist-component
A react component to mimic typewriter effect
https://github.com/jason89521/react-typist-component
react react-component react-components reactjs typewriter typist
Last synced: 7 months ago
JSON representation
A react component to mimic typewriter effect
- Host: GitHub
- URL: https://github.com/jason89521/react-typist-component
- Owner: jason89521
- License: mit
- Created: 2022-05-20T13:54:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T00:29:25.000Z (8 months ago)
- Last Synced: 2024-10-12T19:28:47.777Z (8 months ago)
- Topics: react, react-component, react-components, reactjs, typewriter, typist
- Language: TypeScript
- Homepage:
- Size: 1.91 MB
- Stars: 27
- Watchers: 3
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Typist Component
Create typewriter effect by setting up a component's children directly.
## Install
```bash
npm install react-typist-component
# or
yarn add react-typist-component
```
## Example
```jsx
import Typist from 'react-typist-component';
const MyComponent = () => {
return (
|}>
This is a typo
react component
use
deeper div
);
};
```
## API reference
### `Typist`
```ts
export type Delay = number | (() => number);
export type Splitter = (str: string) => string[];
export type TypistProps = {
children: React.ReactNode;
typingDelay?: Delay;
backspaceDelay?: Delay;
loop?: boolean;
pause?: boolean;
startDelay?: number;
finishDelay?: number;
onTypingDone?: () => void;
splitter?: Splitter;
cursor?: string | React.ReactElement;
disabled?: boolean;
restartKey?: any;
hideCursorWhenDone?: boolean;
};
```
#### `children`
The contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.
Note that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:
```jsx
const Foo = () => {
return
Foo;
};
// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
const App = () => {
return (
123
);
};
```
#### `typingDelay`
**Default**: `75`
The delay after typing a token. If you pass in a function, `Typist` will call the function after typing a token and use the return value as the delay.
#### `backspaceDelay`
**Default**: `typingDelay`
The delay after backspacing a token. If you pass in a function, `Typist` will call the function after backspacing a token and use the return value as the delay.
#### `loop`
**Default**: `false`
`Typist` will automatically restart the typing animation if this value is `true`.
#### `pause`
**Default**: `false`
Set to `true` if you want to pause the typing animation.
#### `startDelay`
**Default**: `0`
`Typist` will wait for this delay before starting the typing animation.
#### `finishDelay`
**Default**: `0`
`Typist` will wait for this delay after finishing the typing animation.
#### `onTypingDone`
This function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.
#### `splitter`
**Default**: `(str: string) => str.split('')`
`Typist` will use this function to get tokens from strings. It may be useful when you want to split your string in different way. For example, you can use [grapheme-splitter](https://github.com/orling/grapheme-splitter) to split string if your string contains emoji.
```tsx
import GraphemeSplitter from 'grapheme-splitter';
const splitter = (str: string) => {
return new GraphemeSplitter().splitGraphemes(str);
};
const App = () => {
return (
😎🗑🥵⚠😀👍✌👨👨👧👦📏💡🚀🎂😓🎈💕😘
);
};
```
#### `cursor`
Will be inserted after the last typed token.
#### `disabled`
**Default**: `false`
If this value is `true`, the result will be displayed immediately without typing animation. It can be useful when you want to display the final result if a user has visited the typing animation.
#### `restartKey`
`Typist` will restart the typing animation whenever `restartKey` changes.
#### `hideCursorWhenDone`
Hide the cursor when the typing animation is done.
### `Typist.Backspace`
```ts
type Props = {
count: number;
};
```
#### `count`
The number of tokens that will be backspaced.
### `Typist.Delay`
```ts
type Props = {
ms: number;
};
```
#### `ms`
The duration of the delay in milliseconds.
### `Typist.Paste`
```ts
type Props = {
children: React.ReactNode;
};
```
#### `children`
Children inside this component will be pasted without typewriter effect. Do not wrap another `Paste` inside this component, otherwise `Typist` will produce weird behavior.