Make your React app more ✨sparkly✨
How to Use
yarn add react-sparkle or
npm install react-sparkle
Sparkle as a child of the element you want to add sparkles to. Important: the parent element must have either
const SparklyThing =// Note: the parent of Sparkle must be positioned relatively or absolutely<div style= position: 'relative' ><Sparkle /></div>
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=5maxSize=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'/>
- The props only take effect on mount. If you need modified props to take effect, you need to unmount and remount
- 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.
This code was inspired by and based on jQuery Canvas Sparkles.