npm package: @real-typer/react
Description: A React library that gives the effect of typing texts
Author: Cyrus Mobini
Latest version: 2.0.8

# @Real-Typer/react [![npm version](https://badge.fury.io/js/@real-typer%2Freact.svg)](https://badge.fury.io/js/@real-typer%2Freact)

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.

```js
import RealTyper from "@real-typer/react";

const App = () => {
  return <RealTyper strings={["Hello", "World"]} />;
};
```

## Customization

the following properties can be customized.

```jsx
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.
```ts
    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.

<br>
<br>
<br>

<small>
@Real-Typer/React

Author: Cyrus Mobini

Licensed under the MIT license.
http://www.opensource.org/licenses/mit-license.php

Copyright 2023 [Cyrus Mobini](https://github.com/cyrus2281)
<small>