New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-fireworks

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-fireworks

A customizable firework like animation that can be used as a component in a react native project

  • 0.2.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-96.83%
Maintainers
1
Weekly downloads
 
Created
Source

Fireworks

A customizable firework like animation that can be used as a component in a react native project.

Demo GIF of fireworks being rendered

Installation

npm i react-native-fireworks

Import

import Fireworks from 'react-native-fireworks'

Usage

Minimal code to ignite the fireworks 🎇

<Fireworks/>

The parameters like the speed of the explosions, the density of fireworks and the colors of the fire can be customized.

<Fireworks
  speed={3}
  density={8}
  colors={['#ff0','#ff3','#cc0','#ff4500','#ff6347']}
  iterations={5}
  height={150}
  width={100}
  zIndex={2}
  circular={true}
/>

Props

There are 8 props and all the 8 are optional.

1. speed

It denotes how fast will an individual cracker explode. It is a number with possible values- 1,2 and 3. 1 is for the slowest and 3 for the fastest. The default value is 2.

2. density

It denotes the number of crackers exploding simultaneously. It is a number between 1 and 10. The default value is 5.

3. colors

The fireworks explode into colorful light crystals. You can set the colors of your choice by passing their hex codes or rgb values (as Strings) in an array. If you don't pass any colors, luckily you will get light crystals of all possible colors ranging from 'rgb(0,0,0)' to 'rgb(255,255,255)'.

4. iterations

It denotes the number of times the explosions take place. The density prop controls the number of simultaneous explosions whereas iterations tells how many times the simultaneous explosions should occur.

It can be any number or the string- 'infinite'. The default value is 'infinite'.

5. height

Height of the area in which fireworks are rendered. Its default value is the height of the screen.

6. width

Width of the area in which fireworks are rendered. Its default value is the width of the screen.

7. zIndex

zIndex of the Firework component. Its default value is 10.

8. circular

When set to true, the crackers burst making a circle as shown below. The default value is false.

Demo GIF of circular fireworks being rendered

Keywords

FAQs

Package last updated on 17 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc