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-reveal-text

v0.1.1

Published

A small react library for animating the revealing of text.

Downloads

193

Readme

React Reveal Text

npm dependencies travis bithound license

A small react library for animating the revealing of text.

gif animation

Demo/Tutorial available here: https://adrianmcli.github.io/react-reveal-text/

The demo page was built with React Storybook.

Features 🎉

  • Simple – Just plain ol' CSS transition animations.
  • Zero dependencies – Keeping it light and lit up!
  • Flexible – Choose your own easing function and timing.
  • Customizable – Customize and theme like a regular div.
  • Dynamic – Intelligent generation of random transition delay numbers.

Getting Started

  1. Install:
npm install --save react-reveal-text
  1. Use:
<ReactRevealText>WELCOME!</ReactRevealText>

API

Interactive docs with live-editable props here.

This component has many props that you can manipulate; below is a list of all of them.

Note that the component only re-renders when the show property has been changed.

Basic Properties

  • text (string)
    You can set the text either by passing in text as children or by using the text property.

  • show (boolean)
    This prop allows you to control what state the component is in. It allows you to hide or reveal the text.

  • className (string)
    This prop allows you to set the className for the div surrounding the text.

  • style (object)
    This prop allows you to pass in styles for the div surrounding the text.

Transition Properties

Each letter has its own randomly generated delay before its transition begins.

  • transitionTime (integer) [default: 1300]
    The time it takes for each letter's transition.

  • timingFunction (string) [default: 'linear']
    The CSS transition-timing-function property. On this page, you are given a dropdown selection, but in practice (and in the sandbox), you can enter in any valid string.

  • delayMin (integer) [default: 200]
    The minimum allowable delay before the transition for a letter is to begin.

  • delayMax (integer) [default: 1200]
    The maximum allowable delay before the transition for a letter is to begin.

  • threshold (float) [default: 0.2]
    The difference between the random numbers generated for each letter compared to the previous letter. Setting this higher will force the delays to be very different between each letter, spreading out the effect. Setting this lower will allow delays to be similar between letters, sometimes creating a chunking effect.

Contributing

This project was built using my two other tools: React Build Lib and React Build Dist. These tools are still very early in development, so if you are building these libraries, you may encounter some bugs. PRs and issues are welcomed and encouraged! Should probably add some testing too.