react-sparkle

Version: 2.0.0-alpha.0

React version: ^18.2.0

Simple


import Sparkles from 'react-sparkle'

const Demo = () => (
  <div className="box">
    <Sparkles flicker={false} />
  </div>
)


.box {
  position: relative; /* mandatory */
  background: #00bdbd;
  width: 140px;
  height: 140px;
}

Different Color, Size, and Speed


import Sparkles from 'react-sparkle'

const Demo = () => (
  <div className="box">
    <Sparkles
      color="red"
      count={20}
      minSize={7}
      maxSize={12}
      overflowPx={80}
      fadeOutSpeed={30}
      flicker={false}
    />
  </div>
)

Make Text Sparkle


import Sparkles from 'react-sparkle'

const Demo = () => (
  <span className="container">
    <h4>I am so sparkly. Look at me go!</h4>
    <Sparkles color="teal" overflowPx={8} />
  </span>
)


.container {
  position: relative; /* mandatory */
}

I am so sparkly. Look at me go!

Permanent Sparkles


import Sparkles from 'react-sparkle'

const Demo = () => (
  <div className="box">
    <Sparkles
      color="purple"
      fadeOutSpeed={10}
      newSparkleOnFadeOut={false}
      flicker
      flickerSpeed="fast"
      count={80}
    />
  </div>
)

Box-sizing demo


import Sparkles from 'react-sparkle'

const Demo = () => (
  <div
    className="box"
    style={{
      boxSizing: 'border-box',
      padding: 40,
      border: '8px solid red'
    }}
  >
    <Sparkles />
  </div>
)