Noodle Printing Machine

    react-random-reveal
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    React Random Reveal

    npm GitHub Workflow Status Codecov npm bundle size

    React component/hook to add a little thrill before revealing the truth. This effect is achieved via a character animation that shows random characters before revealing the text you want to emphasize. The library provides full control over the reveal run: its duration and easing can be freely adjusted.

    • Animate random letters, numbers, emojis, words or components
    • Performance optimized with single requestAnimationFrame loop to animate the random characters (no setInterval used)
    • Built with TypeScript

    Installation

    yarn add react-random-reveal
    

    Demos

    Text Demo Emoji Demo Words Demo
    Edit cslqw Edit kp7ly Edit 8rr2w

    Basic usage

    As a component:

    import { RandomReveal } from 'react-random-reveal'
    
    const AddSuspenseComponent = () => (
      <RandomReveal isPlaying duration={2} characters="hello world" />
    )

    As a hook:

    import { useRandomReveal } from 'react-random-reveal'
    
    const AddSuspenseComponent = () => {
      const characters = useRandomReveal({
        isPlaying: true,
        duration: 2,
        characters: 'hello world',
      })
    
      return characters
    }

    Props

    Prop Name Type Default Description
    isPlaying boolean required Play and pause animation.
    characters string | ReactNode[] required Characters to reveal in the end of the duration. These could be letters, numbers, emojis, words or components
    duration number required Total animation duration in seconds. The duration includes the overall time random characters are shown plus the time for revealing the characters
    updateInterval number 0.065 Update interval in seconds. Determines how often the characters will change. When set to 0 the value will update on each key frame
    revealDuration number 0.6 The duration to reveal all characters is represented as a fraction of the total duration. This is a number between 0 and 1. When set to 0, all characters will be revealed in the end of the duration at once. When set to 1, characters will start revealing from the beginning of the duration
    revealEasing 'linear' | 'easeInQuad' | 'easeOutQuad' | 'random' linear The easing function used to reveal characters during the reveal duration
    characterSet ReactNode[] English alphabet: ['a', 'b', 'c', ... 'z'] Characters that will be used during the random characters run
    ignoreCharacterSet string[] - Characters that won't be animated and will always be revealed. Can be used to ignore animating space or any special characters.
    onComplete () => void | { shouldRepeat: boolean, delay: number } - The callback is fired when the duration is reached. It can be used to restart the animation by returning an object with the following params: shouldRepeat - indicates if the loop should start over; delay - delay before looping again in seconds

    Browser support

    We support all modern browsers targeting es6. Internet Explorer (IE) is not longer supported.

    Install

    npm i react-random-reveal

    DownloadsWeekly Downloads

    118

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    23

    Last publish

    Collaborators

    • vydimitrov