react-sparkle

react-sparkle

Make your React app more :sparkles:sparkly:sparkles:

Demo

• Live demo
• Demo source code

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.