Typing-Effect

View Demo || Documentation

---

Table of Contents

• Introduction
• Installation
• Documentation
  • Typing Component
  • TypingStep Component

---

Introduction

Typing-Effect is a UI Component for React which provides elegant typing effects with very few lines of code. Typing-Effect provides an effective way in

Current Features

✅  Full Control over your animations  
✅  Easy delete  
✅  Smart Backspacing  
✅  No external CSS or JS dependency  

Upcoming Features

🙆  Embedding html tags inside strings  
🙆  Insert at specific position  

---

Installation

Install via npm

npm install typing-effect-reactjs

Development Installation

git clone https://github.com/Sid200026/typing-effect.git
cd typing-effect/
npm install
npm start

Import

import { Typing, TypingStep } from "typing-effect-reactjs";

---

Documentation

Typing-Effect library provides 2 UI Components that can be used to render aesthetically pleasing yet elegant typing effects

1. <Typing /> : A simple UI Component that will satisfy the requirements 90% of the time
2. <TypingStep /> : Fully customisable UI Component for advanced use cases

Typing Component

Typing Component operates at sentence level ie. it does not support character operations. An example of character operations can be typing some text then deleting 2 characters and then adding some more. For this usecase, <TypingStep> component was developed. For most of the other use cases, <Typing> component suffices.

Examples

<Typing text="typing-effect is a React Component made with <3" />

<Typing
  text={[
    "Winner of Football World Cup 2018 is France",
    "Winner of Football World Cup 2014 is Germany",
    "Winner of Cricket World Cup 2019 is England",
    "Winner of Cricket World Cup 2015 is Australia",
  ]}
  smartBackspace
/>

Props

Prop Name	Prop Type	Description	Default Value
text	array or string	An array of text or a string that needs to be rendered	Required
suppressEmptyArray	boolean	Whether to raise an error if text array is empty ( Not applicable for string )	false
ignoreInitialDelay	boolean	Whether to initially render the first character ( set as true to render immediately )	true
element	string or React Component	HTML Element or React Component used to render the text	h4
styleClass	string	Any style class to be added to the rendered element	""
typeSpeed	number	Speed at which to type in milliseconds	40
deleteSpeed	number	Speed at which to delete in milliseconds	30
letterSpacing	number	Spacing between the rendered elements	0
cursorThickness	number	Thickness of the cursor	0.15
cursorColor	string	Color of the cursor	black
cursorPadding	number	Distance between cursor and the last word	0.15
blinkingSpeed	number	Rate at which to blink cursor	530
disableBlinkingOnEnd	boolean or number	Whether to disable blinking on end ( true, false ) or number of times to blink before stopping ( number )	5
shouldDelete	boolean	Should delete the current text or just append the new text	true
smartBackspace	boolean	Whether to delete only the minimal number of characters required to match the current string with the next	false

Example Code

Example 1 Example 2 Example 3

TypingStep Component

TypingStep Component operates at character level. The caveat specified in <Typing> component can be solved by <TypingStep> component. TypingStep allows us to do the following three operations

1. Add text
2. Delete characters
3. Delay Execution

Example

<TypingStep
  sequence={[
    {
      content: "Typing-Effect provides to fucntionality",
    },
    {
      content: 100, // 100ms delay
    },
    {
      content: -16, // Delete 16 characters
    },
    {
      content: 200, // 200ms delay
    },
    {
      content: "two components : \n1. <Typing />\n2. <TypingStep />",
    },
  ]}
/>

const sequence = [
  {
    content: "Six is less than five",
    config: {
      styleClass: "typing",
    },
  },
  {
    content: 400,
    config: {
      styleClass: "wrong", // Custom Style class
    },
  },
  {
    content: -14,
    config: {
      styleClass: "wrong",
      cursorColor: "red",
    },
  },
  {
    content: 200, // 200ms delay
    config: {
      styleClass: "typing",
    },
  },
  {
    content: "greater than five",
    config: {
      styleClass: "typing",
    },
  },
  {
    content: 100, // 200ms delay
    config: {
      styleClass: "typing",
    },
  },
];

<TypingStep sequence={sequence} element="h4" styleClass="correct" />;

Props

Sequence Prop ( array of objects)

The sequence prop consists of a list of commands that will be executed by the <TypingStep> component.

Structure of each command

{
  // Command to be executed
  content: config: {
    // List of configs that will override global configs
  }
}

content

String	Negative Number	Positive Number
Adds the string to the currently rendered string	Deletes the number of characters specified	Delays the next command execution
content : "Hi there"	content : -5	content : 500
Adds Hi there to the current string	Deletes the last 5 characters	Delays the execution of next command by 500ms

config

A set of local configs that can override the global configs. Overriding will occur only when that specific command is executed. At the end of command execution, global configs takes preference. All the properties that config can override are given below. The following 3 properties cannot be overriden

1. sequence
2. ignoreInitialDelay
3. element
4. disableBlinkingOnEnd

Prop Name	Prop Type	Description	Default Value
sequence	array	Sequence of commands and configurations to execute	required
ignoreInitialDelay	boolean	Whether to initially render the first character ( set as true to render immediately )	true
element	string or React Component	HTML Element or React Component used to render the text	h4
styleClass	string	Any style class to be added to the rendered element	""
typeSpeed	number	Speed at which to type in milliseconds	40
deleteSpeed	number	Speed at which to delete in milliseconds	30
letterSpacing	number	Spacing between the rendered elements	0
cursorThickness	number	Thickness of the cursor	0.15
cursorColor	string	Color of the cursor	black
cursorPadding	number	Distance between cursor and the last word	0.15
blinkingSpeed	number	Rate at which to blink cursor	530
disableBlinkingOnEnd	boolean or number	Whether to disable blinking on end ( true, false ) or number of times to blink before stopping ( number )	5

Example Code

Example 4 Example 5 Example 6 Example 7

---