[](https://www.npmjs.com/package/react-sparkle) [](https://www.npmjs.com/package/react-sparkle) # react-sparkle Make your React app more :sparkles:sparkly:sparkles: ## Demo * [Live demo](https://kmjennison.github.io/react-sparkle/) * [Demo source code](./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. ```js 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: ```js <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](https://github.com/simeydotme/jQuery-canvas-sparkles).