Auto Tying

Animates text to copy the behaviour of auto typing

This is a Typography component that creates the effect of auto typing anywhere it is placed. Like every other component, it is imported like so :

// importing Auto typing component
import { Type } from "@wigxel/react-components/lib/typography";
// importing Auto typing component in a more discriptive way
import { Type as AutoTyping } from "@wigxel/react-components/lib/typography";

The Auto typing component accepts two properties, values and speed. The values props accepts an array of strings. The strings are the words to be used in the auto-typing. The speed props accepts a number. This number is used to control the typing speed.

The speed is in milliseconds (ms). An ideal speed rate will be 100ms.

import React from "react";
import { Type as AutoTyping } from "@wigxel/react-components/lib/typography";

const HeaderText = () => {
    return (
        <section>
            <h1>
                I am a 
                <AutoTyping 
                    values={["Developer", "Gamer", "Advocate"]} 
                    speed={100} 
                />
            </h1>
        </section>
    )
}

The auto-typing component comes the a default black-colored text with no styling. To style this component, simply wrap it with an HTML tag and style the tag.

// The Auto-typing component text would have a red color.
<span style={{ color: "red" }}>
    <AutoTyping 
        values={["Developer", "Gamer", "Advocate"]} 
        speed={100} 
    />
</span>