Create typewriter effect by setting up a component's children directly.
npm install react-typist-component
# or
yarn add react-typist-component
import Typist from 'react-typist-component';
const MyComponent = () => {
return (
<Typist typingDelay={100} cursor={<span className='cursor'>|</span>}>
This is a typo
<br />
<Typist.Backspace count={5} />
<Typist.Delay ms={1500} />
react component
<Typist.Paste>
<div>
use
<div>deeper div</div>
</div>
</Typist.Paste>
</Typist>
);
};
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;
};
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:
const Foo = () => {
return <div>Foo</div>;
};
// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
const App = () => {
return (
<Typist>
123
<Foo />
</Typist>
);
};
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.
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.
Default: false
Typist
will automatically restart the typing animation if this value is true
.
Default: false
Set to true
if you want to pause the typing animation.
Default: 0
Typist
will wait for this delay before starting the typing animation.
Default: 0
Typist
will wait for this delay after finishing the typing animation.
This function will be called when the typing animation finishes. It will be called before waiting for the timeout with finishDelay
.
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 to split string if your string contains emoji.
import GraphemeSplitter from 'grapheme-splitter';
const splitter = (str: string) => {
return new GraphemeSplitter().splitGraphemes(str);
};
const App = () => {
return (
<Typist splitter={splitter}>
๐๐๐ฅตโ ๐๐โ๐จโ๐จโ๐งโ๐ฆ๐๐ก๐๐๐๐๐๐
<Typist.Backspace count={16} />
</Typist>
);
};
Will be inserted after the last typed token.
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.
Typist
will restart the typing animation whenever restartKey
changes.
Hide the cursor when the typing animation is done.
type Props = {
count: number;
};
The number of tokens that will be backspaced.
type Props = {
ms: number;
};
The duration of the delay in milliseconds.
type Props = {
children: React.ReactNode;
};
Children inside this component will be pasted without typewriter effect. Do not wrap another Paste
inside this component, otherwise Typist
will produce weird behavior.