ClickSpark — click-spark

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { ClickSpark } from '@oalacea/chaosui/effects/click-spark';

<ClickSpark>
  <button>Click for sparks</button>
</ClickSpark>
<ClickSpark sparkColor="#ff0040" sparkCount={12} sparkRadius={20}>
  <button>Red burst</button>
</ClickSpark>

PROPS

PropTypeDefault

childrenChild elements

ReactNode-

sparkColorColor of sparks (hex)

string"#fff"

sparkSizeSize of each spark line in pixels

number10

sparkRadiusRadius of explosion in pixels

number15

sparkCountNumber of sparks per click

number8

durationDuration of animation in ms

number400

easingEasing function

"linear" | "ease-in" | "ease-in-out" | "ease-out""ease-out"

extraScaleExtra scale multiplier

number1.0