React Typewriter Animate

!banner

Useful Links

- NPM Repo
- CodeSandbox Demo

Note: Examples are written far below.

$3

- Installation
- Usage in React
- Options for Typewriter
- Options for WordBlock
- Options for ActionBlock
- Examples
- Basic Example
- Example with override object in WordBlock
- Example with override cursor in WordBlock
- Example with styled WordBlock
- Example with overwrite style object: classes
- Example with delete
- Example with combo: start flag and function

Installation

npm install react-typewriter-animate

or

yarn add react-typewriter-animate

Usage in React

``typescript

import Typewriter from 'react-typewriter-animate';
import "react-typewriter-animate/dist/Typewriter.css";

...

class Demo extends React.Components {
render() {
return (


)
}
}

`

Options for Typewriter

`typescript
type TypewriterProps = {
dataToRotate: (WordBlock | ActionBlock)[][]; // Purpose: This is the array of all data (i.e banners) to type out. Each banner is a small array of WordBlock's and ActionBlock's

cursor?: {
char?: string; // Default: "│" | Purpose: Set cursor's appearance using string.
cursorBlinkRate?: string; // Default: "900ms" | Purpose: Set blink speed of cursor.
timeBeforeBlinkCursor?: number; // Default: 500ms | Purpose: When finish typing, set timeout before blinking cursor.
};

timeBeforeDelete?: number; // Default: 1000ms | Purpose: Wait time before deleting a banner after finish typing the whole banner.
timeBeforeWriteNewRotateData?: number; // Default: 500ms | Purpose: Wait time before typing next banner.

maxTypeSpeed?: number; // Default: 200ms | Purpose: Maximum typing speed.
typeVariance?: number; // Default: 100ms | Purpose: Type speed range = maxTypespeed - typeVariance -> maxTypespeed. Type speed of each character can vary randomly within this range.

maxDeleteSpeed?: number; // Default: 100ms | Purpose: Maximum deleting speed.
deleteVariance?: number; // Default: 50ms | Purpose: Delete speed range = maxDeleteSpeed - deleteVariance -> maxDeleteSpeed. Delete speed of each character can vary randomly within this range.

start?: boolean; // Default: true | Purpose: Determine whether Typewriter should start typing.
loop?: boolean; // Default: false | Purpose: Determine whether Typewriter should loop these banners or stop after the last banner.

containerClass?: string; // Purpose: Overwrite default styles of Typewriter-container.
contentClass?: string; // Purpose: Overwrite default styles of Typewriter-content.
cursorClass?: string; // Purpose: Overwrite default styles of Typewriter-cursor.
};
`

Note: You can access the class name keywords safely through TypewriterClassNames exported from the package.

`typescript
enum TypewriterClassNames {
Container = "Typewriter-container",
Content = "Typewriter-content",
Cursor = "Typewriter-cursor",
Blink = "Typewriter-blink",
Blink_Keyframe = "Typewriter-blink-keyframe"
}
`

Options for WordBlock

`typescript
type WordBlock = {
type: "word";
text: string;

spanClass?: string; // Purpose: Class name for current word block. Typewriter will wrap text inside a for you.

// Purpose: Override cursor style and appearance.
cursor?: {
char?: string; // Default "│"
cursorClass?: string;
};

// Purpose: Override type speed and delete speed passed from main props.
override?: {
maxTypespeed?: number;
typeVariance?: number;

maxDeleteSpeed?: number;
deleteVariance?: number;
};
};
`

Options for ActionBlock

`typescript
type DeleteBlock = {
type: "action";
action: "delete";
amount: number;
wait?: number; // Default wait time before delete is 1000ms
};

type FunctionBlock = {
type: "action";
action: "function";
func: () => void;
wait?: number; // Default wait time before doing function is 0ms
};
`

Examples

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";

class BasicExample extends React.Components {
render() {
return (



);
}
}
`

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";

class Example_Override_WordBlock extends React.Components {
render() {
return (



);
}
}
`

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";

class Example_Override_Cursor_WordBlock extends React.Components {
render() {
return (



);
}
}
`

$3

`typescript

import Typewriter from 'react-typewriter-animate';
import "react-typewriter-animate/dist/Typewriter.css";

class Example_Styled_WordBlock extends React.Components {
render() {
return (


):
}
}

`

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";
import "./overwrite.css";

/**
* Default styles:
*
* .Typewriter-cursor {
* --cursor-blink-rate: 900ms;
*
* color: inherit;
* transition: all 0.2s;
* }
*
* .Typewriter-blink {
* animation: Typewriter-blink-keyframe var(--cursor-blink-rate) step-end infinite;
* },
*
* @keyframes Typewriter-blink-keyframe {
* 0% {
* opacity: 0;
* }
* 50% {
* opacity: 1;
* }
* }
*/

/**
* ./overwrite.css file:
*
* .typewriter-container-overwrite {
* color: "white";
* background-color: "blue";
* }
*/

class Example_Overwrite_Style extends React.Components {
render() {
return (



);
}
}
`

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";

class Example_Delete extends React.Components {
render() {
return (



);
}
}
`

$3

`typescript
import Typewriter from "react-typewriter-animate";
import "react-typewriter-animate/dist/Typewriter.css";

class Example_Start_Function extends React.Components {
state = {
start: false
};

render() {
const { start } = this.state;

return (



);
}
}
``