https://github.com/bigfanjs/react-explode

a collection of explosion animations made in SVG and GSAP
https://github.com/bigfanjs/react-explode

Last synced: 2 days ago
JSON representation

a collection of explosion animations made in SVG and GSAP

• Host: GitHub
• URL: https://github.com/bigfanjs/react-explode
• Owner: bigfanjs
• License: mit
• Created: 2018-06-19T23:27:05.000Z (over 6 years ago)
• Default Branch: develop
• Last Pushed: 2023-01-06T01:45:49.000Z (almost 2 years ago)
• Last Synced: 2024-12-16T21:11:34.908Z (10 days ago)
• Language: JavaScript
• Size: 1.21 MB
• Stars: 153
• Watchers: 3
• Forks: 7
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# React-explode

React Explode is a collection of explosion animations made in SVG and GSAP.

[See a demo](https://bigfanjs.github.io/react-explode-demo/)

# Installation

`npm install react-explode` or `yarn add react-explode`

# Usage

```js

import React, { Component } from "react";

import Explosion from "react-explode/Explosion1";

class ReactExplode extends Component {

  render() {

    return ;

  }

}

```

# Component API

| Name        |  Type  |   Default |                       Description                        |

| ----------- | :----: | --------: | :------------------------------------------------------: |

| size        | string |       400 |                    The explosion size                    |

| delay       | number |         0 | How much time the explosion would wait before it starts  |

| repeatDelay | number |         0 | How much time the explosion would wait before it repeats |

| repeat      | number |         0 |           How many times the explosion repeats           |

| color       | string |     white | The explosion color(Explosions: 1, 2, 3, 4, 5, 6, 7, 8)  |

| style       | object | undefined |             The style passed to SVG element              |

| onComplete  |  func  | undefined |            Fired when the explosion completes            |

| onRepeat    |  func  | undefined |             Fired when the explosion repeats             |

| onStart     |  func  | undefined |             Fired when the explosion starts              |

# Where to use react-explode

There are bunch of use case where you can use the explosions:

- loading indicators.

- infinite loop in the background.

- explode at the end of an operation.

- explode on user actions like mouse clicks.

# License

`react-explode` is under the MIT license.