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

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

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

Example Code

Example 4 Example 5 Example 6 Example 7