pascaldevink / react-use-firework

A simple react hook to create click-firework animation

react-use-firework 🎆

Demo

Installation

npm i react-use-firework --save
yarn add react-use-firework

Usage

import React, { useRef } from "react";

import useFireWork from "react-use-firework";

export component = ()=> {
  const ref = useRef(null);
  useFireWork(ref);

  return (
    <div
     ref={ref}
     style={{ width: "100%", height: "600px", background: "#000" }}
    />
  );
}

APIs

the usage demo describes the basic usage and default setting of useFirewrok, you can use it with some options like useFirework(ref,{ count: 10, ...otherOptions }) as well and the supporting options arguments are like the table below

name	type	default	description
count	number	30	The number of the firework dot
duration	number	1500	the millisecond of the duration of firework
size	number	6	the size of each firework dot
range	number	200	the spread range radius of the firework
colors	Array	["#f59342", '#f5e942', '#f54242']	the color of the firework
randomColor	boolean	false	whether to apply random color into the firework