npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

typeit-react

v2.7.7

Published

React component for the most versatile JavaScript animated typing utility on the planet.

Downloads

9,724

Readme

TypeIt - React

The official React component for TypeIt, the most versatile JavaScript animated typing utility on the planet. You can use it to bring dynamic typewriter effects to your React applications.

License Options

Using TypeIt for an open source or personal project is completely free is licensed under GPLv3. To use it in a commercial project, however, a paid license is required.

Installation

npm install typeit-react

Usage

The Simplest Example

In its simplest implementation, import the component and wrap some text to be typed.

import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt>This will be typed in a `span` element!</TypeIt>
        </div>
    );
};

A More Complex Example

The component will allow its children to fully render, and then type whatever HTML is generated. So, in addition to simple strings, you can nest HTML and components like below.

import TypeIt from "typeit-react";

// This could be any component that generates HTML.
const SuperStrong = ({ children }) => {
    return <strong style={{ fontSize: "80px" }}>{children}</strong>;
};

export default () => {
    return (
        <div className="App">
            <TypeIt>
                Weak text. <SuperStrong>Super strong text.</SuperStrong>
            </TypeIt>
        </div>
    );
};

Customizing Your Options

To tweak the animation to your liking, pass an object as the options prop. All options supported by the core TypeIt library can be used here. Using this prop, you can also set strings without passing them as children. See TypeIt's documentation for more details on what's available.

import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt
                options={{
                    strings: ["This will be typed!"],
                    speed: 10,
                    waitUntilVisible: true,
                }}
            />
        </div>
    );
};

Choosing Your Own Element

Out of the box, a span element is used to contain the typing animation. To choose your own element, use the element prop.

import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt element={"h3"}>This will be typed in an H3 tag.</TypeIt>
        </div>
    );
};

Fine-Tuning the Instance w/ Companion Methods

TypeIt comes with a set of special methods that let you fine-tune an animation down to the smallest detail. To leverage them here, pass a function as the onBeforeInit prop, which will give you access to the instance you can modify with these methods, and then return back to the component before the animation is initialized.

import TypeIt from "typeit-react";

<TypeIt
    getBeforeInit={(instance) => {
        instance
            .type("Hi, I'm Alxe")
            .pause(750)
            .delete(2)
            .pause(500)
            .type("ex!");

        // Remember to return it!
        return instance;
    }}
/>;

Accessing the Instance After Initalization

Similarly, the getAfterInit prop allows you to access the instance after it's been kicked off, so you'll be able to leverage methods like .freeze(), .unfreeze(), and .is(). Read more about those here.

export default () => {
    const [buttonText, setButtonText] = useState("Freeze");
    const [instance, setInstance] = useState(null);

    const toggleFreeze = () => {
        if (instance.is("frozen")) {
            instance.unfreeze();
            setButtonText("Freeze");
            return;
        }

        instance.freeze();
        setButtonText("Unfreeze");
    };

    return (
        <div className="App">
            <button onClick={toggleFreeze}>{buttonText}</button>

            <TypeIt
                options={{ loop: true }}
                getAfterInit={(instance) => {
                    setInstance(instance);
                    return instance;
                }}
            >
                This will just keep on going.
            </TypeIt>
        </div>
    );
};

Need Help?

If you're working with a custom implementation of TypeIt and would like some help, I'm available for hire. Get in touch!