Have ideas to improve npm?Join in the discussion! »

    react-sparkle

    1.0.8 • Public • Published

    npm npm

    react-sparkle

    Make your React app more ✨sparkly✨

    Demo

    How to Use

    Install: yarn add react-sparkle or npm install react-sparkle

    Add Sparkle as a child of the element you want to add sparkles to. Important: the parent element must have either relative or absolute positioning.

    import React from 'react'
    import Sparkle from 'react-sparkle'
     
    const SparklyThing = () => (
      // Note: the parent of Sparkle must be positioned relatively or absolutely
      <div style={{ position: 'relative' }}>
        <Sparkle />
      </div>
    )

    Options

    All props are optional. These are the defaults:

    <Sparkle
      // The color of the sparkles. Can be a color, an array of colors,
      // or 'random' (which will randomly pick from all hex colors).
      color={'#FFF'}
      
      // The number of sparkles to render. A large number could slow
      // down the page.
      count={50}
      
      // The minimum and maximum diameter of sparkles, in pixels.
      minSize={5}
      maxSize={8}
      
      // The number of pixels the sparkles should extend beyond the
      // bounds of the parent element.
      overflowPx={20}
      
      // How quickly sparkles disappear; in other words, how quickly
      // new sparkles are created. Should be between 0 and 1000,
      // with 0 never fading sparkles out and 1000 immediately
      // removing sparkles. Most meaningful speeds are between
      // 0 and 150.
      fadeOutSpeed={50}
      
      // Whether we should create an entirely new sparkle when one
      // fades out. If false, we'll just reset the opacity, keeping
      // all other attributes of the sparkle the same.
      newSparkleOnFadeOut={true}
      
      // Whether sparkles should have a "flickering" effect.
      flicker={true}
      
      // How quickly the "flickering" should happen.
      // One of: 'slowest', 'slower', 'slow', 'normal', 'fast', 'faster', 'fastest'
      flickerSpeed={'normal'}
    />

    Limitations

    • The props only take effect on mount. If you need modified props to take effect, you need to unmount and remount Sparkle.
    • The sparkle image sprites aren't currently customizable. In the future, we might want to accept custom images or use drawn canvas shapes to eliminate the images altogether.

    Acknowledgements

    This code was inspired by and based on jQuery Canvas Sparkles.

    Install

    npm i react-sparkle

    DownloadsWeekly Downloads

    133

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    8.46 MB

    Total Files

    89

    Last publish

    Collaborators

    • avatar