@real-typer/react

@Real-Typer/react

A React component that gives the effect of typing for texts

Install

npm install @real-typer/react

Quick Start:

After adding the component to your module list, you can simply use it with "typer" tags.

You can either pass a string or an array of strings.

import RealTyper from "@real-typer/react";

const App = () => {
  return <RealTyper strings={["Hello", "World"]} />;
};

Customization

the following properties can be customized.

const App = () => {
  const ref = React.useRef({});

  useEffect(() => {
    ref.current.emit("New Message", true);
  }, []);

  <RealTyper
    strings={["Hello", "World", "From", "Real-Typer"]}
    ref={ref}
    cursorCharacter="|"
    cursorBlink={true}
    typeSpeed={100}
    deleteSpeed={50}
    holdDelay={1500}
    pauseDelay={1000}
    startDelay={0}
    delete={true}
    deleteLastString={true}
    loop={true}
    loopHold={1500}
    loopStartIndex={0}
    callback={functionName}
    callbackArgs={{}}
    developerMode={true}
    classes="className"
  ></RealTyper>
};

Interface:

strings : string | string[] : (default: Undefined) : Strings to be type, this value can be passed both as an string or an array of strings

cursorCharacter : string : (default: "|")          : value for the cursor symbol. put "" for no cursor

cursorBlink (default: true)                        : whether to blink the cursor or not

typeSpeed : number : (default: 100)                : the speed at which the characters are written

deleteSpeed : number : (default: 50)               : the speed at which the characters are deleted

holdDelay : number : (default: 1500)               : the amount of delay before starting to delete

pauseDelay : number : (default: 1000)              : the amount of delay before starting the next string

startDelay : number : (default: 0)                 : the amount of delay before starting to type since the call of method

delete : boolean : (default: true)                 : whether to delete the string or not

deleteLastString : boolean : (default: true)       : whether to delete the last string or not (only happens if 'delete' is true)

loop : boolean : (default: true)                   : whether to loop or not

loopHold : number : (default: 1500)                : the amount of pause before repeating the cycle

loopStartIndex : number : (default: 0)             : Index of the string that the loop will start from the second cycle and on

callback : Function : (default: null)              : callback function that will run after each cycle

callbackArgs : any : (default: null)               : argument that will be passed to the callback function

developerMode : boolean : (default: false)         : logs errors in the console for debugging [recommend for development]

classes : string : (default: '')                   : class names that will be added to the component

Emitters

You can use emit from ref to add an string to the list of strings being typed.

    const index: number|true|undefined = true;
    ref.current.emit("New String", index);

• index is optional and if not passed the string will be added to the end of the list.
• index can be a number or true. if it is a number the string will be added to the list at that index. if it is true the string will be added to the last string.

@Real-Typer/React

Author: Cyrus Mobini

Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php

Copyright 2023 Cyrus Mobini