An open API service indexing awesome lists of open source software.

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: 6 months ago
JSON representation

A react component to mimic typewriter effect

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.