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

@edwellbrook/react-typewriter

v0.5.1

Published

React components for automatic typing effects.

Downloads

2

Readme

react-typewriter

A react component for animated typing text.

Installation

yarn add @edwellbrook/react-typewriter

Basic Usage

Pass in children to the TypeWriter component like any other component. Make sure to set the isTyping property to true when you want the component to begin animating.

import React from 'react'
import TypeWriter from 'react-typewriter'

class YourReactClass extends React.Component {

  render() {
    return (
      // Passing in text
      <TypeWriter isTyping={true}>Hello World!</TypeWriter>
    )
  }

}

Child components can be nested as deep as necessary. Text is typed out as each character appears in a pre-order traversal of the nested structure.

Documentation

TypeWriter

props.isTyping

type: Boolean default: false

This flag will turn the typing effect on and off.

props.initDelay

type: Integer default: 1000

Delay before typing begins in milliseconds.

props.maxDelay

type: Integer default: 100

The maximum delay between each typed token in milliseconds.

props.minDelay

type: Integer default: 20

The minimum delay between each typed token in milliseconds.

props.fixed

type: Boolean default: false

This flag will ensure the enclosing container's size and shape is fixed. Prevents the text from shifting around as it grows into its container.

props.delayMap

type: Array[Object] default: none

Allows for setting characters or indexes that will increase or decrease the delay period until the next character.

The array contains objects requiring two keys: at: can either be a character, integer, or regex. If there are characters that match the string or regex, the delay period following that character will be increased by the delay: amount.

var delays = [{
  // At index 4, increase the delay period by 100ms.
  at: 4,
  delay: 100
},
{
  // Add a 400ms delay following every period character.
  at: '.',
  delay: 400
}];

props.onTyped

type: Function default: none

This callback is called when each token is typed in the typing animation. If the animation is erasing, it is called after each token is erased. The token that was typed/erased is passed as the first parameter in the callback. The token may be either a character or a React component. Will also pass the previous number of visible characters.

props.onTypingEnd

type: Function default: none

This callback is called once the typing animation has completed. This is when all text has been either revealed or erased.

refs.restart

type: Function

This function can be called in order to erase the text immediately and restart the animation.

License

The MIT License (MIT)