react-sparkle - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

package.json

 {
   "name": "react-sparkle",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "A React component to increase the number of sparkles in your app",
@@ -41,3 +41,4 @@ "homepage": "https://github.com/kmjennison/react-sparkle",
   "dependencies": {
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "resize-observer-polyfill": "^1.5.0"
   },
@@ -44,0 +45,0 @@ "jest": {

src/SparkleComponent.js

@@ -5,2 +5,3 @@ /* globals Image */
 import PropTypes from 'prop-types'
+import ResizeObserver from 'resize-observer-polyfill'
 
@@ -50,3 +51,3 @@ const spriteSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAHCAYAAAD5wDa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDNFMzM5REEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDNFMzM5RUEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0M0UzMzlCQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0M0UzMzlDQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jzOsUQAAANhJREFUeNqsks0KhCAUhW/Sz6pFSc1AD9HL+OBFbdsVOKWLajH9EE7GFBEjOMxcUNHD8dxPBCEE/DKyLGMqraoqcd4j0ChpUmlBEGCFRBzH2dbj5JycJAn90CEpy1J2SK4apVSM4yiKonhePYwxMU2TaJrm8BpykpWmKQ3D8FbX9SOO4/tOhDEG0zRhGAZo2xaiKDLyPGeSyPM8sCxr868+WC/mvu9j13XBtm1ACME8z7AsC/R9r0fGOf+arOu6jUwS7l6tT/B+xo+aDFRo5BykHfav3/gSYAAtIdQ1IT0puAAAAABJRU5ErkJggg=='
     this.sparkleContext = this.sparkleCanvas.getContext('2d')
-    this.sizeCanvas()
+    this.parentResizeObserver()
     this.start()
@@ -66,15 +67,27 @@ }
 
-  sizeCanvas () {
+  sizeCanvas (parentWidth, parentHeight) {
     const { overflowPx } = this.props
 
-    // Get dimensions of parent container
-    const parentNode = this.sparkleWrapper.parentNode
-    const parentWidth = parentNode.clientWidth
-    const parentHeight = parentNode.clientHeight
-
     // Size the canvas
-    this.sparkleCanvas.width = parentWidth + 2 * overflowPx
-    this.sparkleCanvas.height = parentHeight + 2 * overflowPx
+    this.sparkleCanvas.width = parentWidth + (2 * overflowPx)
+    this.sparkleCanvas.height = parentHeight + (2 * overflowPx)
   }
 
+  // Resize our canvas when the parent resizes
+  parentResizeObserver () {
+    const self = this
+    const ro = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+        const {left, top, width, height} = entry.contentRect
+
+        console.log('Element:', entry.target)
+        console.log(`Element's size: ${width}px x ${height}px`)
+        console.log(`Element's paddings: ${top}px ; ${left}px`)
+
+        self.sizeCanvas(width, height)
+      }
+    })
+    ro.observe(this.sparkleWrapper.parentNode)
+  }
+
   randomSparkleSize () {
@@ -117,8 +130,10 @@ const { minSize, maxSize } = this.props
   recreateSparkle (existingSparkle) {
+    const size = this.randomSparkleSize()
     return Object.assign(existingSparkle, {
+      // Subtract size so sparkles don't get cut off by the edge of the canvas
       position: {
-        x: Math.floor(Math.random() * this.sparkleCanvas.width),
-        y: Math.floor(Math.random() * this.sparkleCanvas.height)
+        x: Math.floor(Math.random() * (this.sparkleCanvas.width - size)),
+        y: Math.floor(Math.random() * (this.sparkleCanvas.height - size))
       },
-      size: this.randomSparkleSize(),
+      size: size,
       opacity: this.getOpacity(),
@@ -171,3 +186,5 @@ color: this.getColor(),
         self.sparkleContext.fillStyle = sparkle.color
-        self.sparkleContext.fillRect(sparkle.position.x, sparkle.position.y, 7, 7)
+        self.sparkleContext.fillRect(
+          sparkle.position.x, sparkle.position.y,
+          sparkle.size, sparkle.size)
       }
@@ -203,3 +220,2 @@
         // Sparkle has faded out
-        // TODO: fade in new sparkles
         if (sparkle.opacity < 0) {
@@ -214,4 +230,2 @@ // Either replace the sparkle with a brand new one or
         }
-
-        // TODO: change position
       })
@@ -240,3 +254,4 @@
           top: `-${overflowPx}px`,
-          left: `-${overflowPx}px`
+          left: `-${overflowPx}px`,
+          pointerEvents: 'none'
         }}
@@ -272,20 +287,40 @@ >
 Sparkle.defaultProps = {
+  // The color of the sparkles. Can be a color, an array of colors,
+  // or 'random' (which will randomly pick from all hex colors).
   color: '#FFF',
-  count: 50, // number of sparkles
+  // The number of sparkles to render. A large number could slow
+  // down the page.
+  count: 50,
+  // The minimum and maximum diameter of sparkles, in pixels.
   minSize: 5,
   maxSize: 8,
+  // The number of pixels the sparkles should extend beyond the
+  // bounds of the parent element.
   overflowPx: 20,
-  // 0 to 1000, with 0 never fading sparkles out and 1000 immediately
-  // removing sparkles; i.e., how quickly new sparkles are created
+  // How quickly sparkles disappear; in other words, how quickly
+  // new sparkles are created. Should be between 0 and 1000,
+  // with 0 never fading sparkles out and 1000 immediately
+  // removing sparkles. Most meaningful speeds are between
+  // 0 and 150.
   fadeOutSpeed: 50,
-  // Whether we should create an entirely new sparkle when one fades out.
-  // If false, we'll just reset the opacity.
+  // Whether we should create an entirely new sparkle when one
+  // fades out. If false, we'll just reset the opacity, keeping
+  // all other attributes of the sparkle the same.
   newSparkleOnFadeOut: true,
+  // Whether sparkles should have a "flickering" effect.
   flicker: true,
-  flickerSpeed: 'normal' // One of: slowest, slower, slow, normal, fast, faster, fastest
-  // TODO
-  // movement speed control
-  // direction toggle? or likelyhood of moving left/right/up/down
+  // How quickly the "flickering" should happen.
+  // One of: slowest, slower, slow, normal, fast, faster, fastest
+  flickerSpeed: 'normal'
 }
 
+// Features that would be good to add:
+// - Option to fade in new sparkles
+// - Sparkle movement
+//    - "Wandering" movement, as in https://github.com/simeydotme/jQuery-canvas-sparkles
+//    - Function-based movement likelihood (e.g. gravity-esque behavior)
+//    - Recreate sparkles when they leave the canvas
+// - Larger-sized sparkles that still look good (the existing
+//   sprites get blurry); possibly use drawn canvas images
+//   instead of sprites
 export default Sparkle

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

431

increased by8.56%

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

254092

decreased by-2.6%

Dependency count

2

increased by100%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.0

• + Addedresize-observer-polyfill@1.5.1(transitive)