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

Upcoming Features

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