Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-sparkle

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sparkle - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

build/index.js

2

package.json
{
"name": "react-sparkle",
"version": "0.0.2",
"version": "0.0.3",
"description": "A React component to increase the number of sparkles in your app",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/kmjennison/react-sparkle",

@@ -29,4 +29,4 @@ /* globals Image */

this.sparkleWrapper = null
this.canvas = null
this.context = null
this.sparkleCanvas = null
this.sparkleContext = null
this.sparkles = []

@@ -45,7 +45,7 @@ this.animationFrame = null

init () {
if (!this.canvas) {
if (!this.sparkleCanvas) {
console.warn('No sparkles today :( The canvas did not render.')
return
}
this.context = this.canvas.getContext('2d')
this.sparkleContext = this.sparkleCanvas.getContext('2d')
this.sizeCanvas()

@@ -75,4 +75,4 @@ this.start()

// Size the canvas
this.canvas.width = parentWidth + 2 * overflowPx
this.canvas.height = parentHeight + 2 * overflowPx
this.sparkleCanvas.width = parentWidth + 2 * overflowPx
this.sparkleCanvas.height = parentHeight + 2 * overflowPx
}

@@ -119,4 +119,4 @@

position: {
x: Math.floor(Math.random() * this.canvas.width),
y: Math.floor(Math.random() * this.canvas.height)
x: Math.floor(Math.random() * this.sparkleCanvas.width),
y: Math.floor(Math.random() * this.sparkleCanvas.height)
},

@@ -144,3 +144,3 @@ size: this.randomSparkleSize(),

drawSparkles () {
if (!this.canvas || !this.context) {
if (!this.sparkleCanvas || !this.sparkleContext) {
return

@@ -150,3 +150,3 @@ }

// Clear canvas
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.sparkleContext.clearRect(0, 0, this.sparkleCanvas.width, this.sparkleCanvas.height)

@@ -157,5 +157,5 @@ const self = this

this.sparkles.forEach((sparkle) => {
self.context.save()
self.context.globalAlpha = sparkle.opacity
self.context.drawImage(
self.sparkleContext.save()
self.sparkleContext.globalAlpha = sparkle.opacity
self.sparkleContext.drawImage(
sprite,

@@ -171,9 +171,9 @@ sparkle.variant, // show different sparkle styles

if (sparkle.color) {
self.context.globalCompositeOperation = 'source-atop'
self.context.globalAlpha = 0.6
self.context.fillStyle = sparkle.color
self.context.fillRect(sparkle.position.x, sparkle.position.y, 7, 7)
self.sparkleContext.globalCompositeOperation = 'source-atop'
self.sparkleContext.globalAlpha = 0.6
self.sparkleContext.fillStyle = sparkle.color
self.sparkleContext.fillRect(sparkle.position.x, sparkle.position.y, 7, 7)
}
self.context.restore()
self.sparkleContext.restore()
})

@@ -246,3 +246,3 @@ }

ref={(canvas) => {
this.canvas = canvas
this.sparkleCanvas = canvas
}}

@@ -249,0 +249,0 @@ />

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