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

react-typing-animation

v1.6.2

Published

[![npm version](https://img.shields.io/npm/v/react-typing-animation.svg)](https://npm.im/react-typing-animation) ![Licence](https://img.shields.io/npm/l/react-typing-animation.svg)

Downloads

1,821

Readme

React-typing-animation

npm version Licence

A fully-featured typing animation in React that supports any valid JSX.

Motivation

There were other JS typing animations that existed when I created this, but they were all lacking in robust features. This component aims to support all of the following features:

✅ Type text from any valid JSX

✅ Preserve DOM structure/styling

✅ Change typing speed anywhere in tree

✅ Add a delay anywhere in tree

✅ Backspace animation

✅ Reset lines / full tree

✅ Loop functionality

✅ No dependencies (CSS or JS)

Demo

View the live demo

or

git clone https://github.com/adamjking3/react-typing-animation
cd react-typing-animation
npm install
npm start

Then open http://localhost:3000/ in a browser.

Feature requests and pull requests welcome

Installation

npm i --save react-typing-animation

Usage

import Typing from 'react-typing-animation';

const AnimatedTypingComponent = () => (
  <Typing>
    <span>This span will get typed.</span>
  </Typing>
);

Documentation

| Property | Type | Default | Required | | :--------------: | :--------: | :--------------------------------------------------------------------------------------------: | :------: | | children | React node | | yes | | className | string | | no | | cursorClassName | string | | no | | cursor | React node | <Cursor /> | no | | hideCursor | boolean | false | no | | speed | number | 50 (ms) | no | | startDelay | number | 0 (ms) | no | | loop | boolean | false | no | | onStartedTyping | function | () => {} | no | | onBeforeType | function | () => {} | no | | onAfterType | function | () => {} | no | | onFinishedTyping | function | () => {} | no |

Backspace Component

import Typing from 'react-typing-animation';
...
  <Typing>
    <span>This span will get typed, then erased.</span>
    <Typing.Backspace count={20} />
  </Typing>

| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | count | number | 1 | false | | | delay | number | 0 | false | | | speed | number | -1 | false | |

Delay Component

import Typing from 'react-typing-animation';
...
  <Typing>
    <div>
      There will be a 1000ms delay here,
      <Typing.Delay ms={1000} />
      then this will be typed.
    </div>
  </Typing>

| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | |

Speed Component

import Typing from 'react-typing-animation';
...
  <Typing speed={50}>
    This line will be typed at 50ms/character,
    <Typing.Speed ms={200} />
    then this will be typed at 200ms/character.
  </Typing>

| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | |

Reset Component

import Typing from 'react-typing-animation';
...
  <Typing>
    <span>This line will stay.</span>
    <span>This line will get instantly removed after a 500 ms delay</span>
    <Typing.Reset count={1} delay={500} />
  </Typing>

| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | count | number | 0 | false | | | delay | number | 0 | false | | | speed | number | -1 | false | |

Contributing

After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.

# Starts a webpack dev server that hosts the demo at http://localhost:3000
npm start

# Lints the code with eslint
npm run lint

# Lints and builds the code, placing the result in the dist directory.
npm run build

Pull requests are welcome!

License

MIT