https://github.com/uyarn/react-use-firework

A simple react hook to create click-firework animation
https://github.com/uyarn/react-use-firework

animation firework react

Last synced: over 1 year ago
JSON representation

A simple react hook to create click-firework animation

• Host: GitHub
• URL: https://github.com/uyarn/react-use-firework
• Owner: uyarn
• License: mit
• Created: 2021-08-26T15:17:23.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2025-02-02T03:07:57.000Z (over 1 year ago)
• Last Synced: 2025-03-18T13:26:08.927Z (over 1 year ago)
• Topics: animation, firework, react
• Language: TypeScript
• Homepage: https://codesandbox.io/s/compassionate-mcnulty-1rppg
• Size: 1.16 MB
• Stars: 6
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## react-use-firework 🎆

[![npm version](https://img.shields.io/npm/v/react-use-firework.svg?style=flat)](https://www.npmjs.com/package/react-use-firework)

[![npm version](https://img.shields.io/npm/dm/react-use-firework)](https://www.npmjs.com/package/react-use-firework)

- A simple react hook to create click-firework animation 🎆

### Demo 🪞

[![Edit react-use-ripple demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-mcnulty-1rppg)

### Install 📦

```shell

yarn add react-use-firework

```

### Usage 📋

```js

import React, { useRef } from "react";

import useFireWork from "react-use-firework";

export component = ()=> {

  const ref = useRef(null);

  useFireWork(ref);

  return (

    


  );

}


```

### API

the usage demo above is the basic usage with 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 |