Typing-Effect

Netlify Status React npm version Downloads Size NPM

View Demo || Documentation


Table of Contents


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