snowfallreact/dist/snowfallreact.cjs.development.js

A React package for creating highly customizable snowfall effects. Perfect for adding a touch of winter magic to your web applications. Compatible with Next.js and ideal for enhancing the user interface with dynamic, seasonal visuals. Easy to integrate an

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

var Snowfall = function Snowfall(_ref) {
  var imageSrc = _ref.imageSrc,
    _ref$windSpeed = _ref.windSpeed,
    windSpeed = _ref$windSpeed === void 0 ? 0 : _ref$windSpeed,
    _ref$windDirection = _ref.windDirection,
    windDirection = _ref$windDirection === void 0 ? 0 : _ref$windDirection,
    _ref$particleCount = _ref.particleCount,
    particleCount = _ref$particleCount === void 0 ? 17 : _ref$particleCount;
  var canvasRef = React.useRef(null);
  React.useEffect(function () {
    var canvas = canvasRef.current;
    if (!canvas) return;
    var context = canvas.getContext('2d');
    if (!context) return;
    var particles = [];
    var img = new Image();
    img.src = imageSrc;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var radian = windDirection * Math.PI / 180;
    var Particle = /*#__PURE__*/function () {
      function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.speed = Math.random() * 1 + 1;
        this.size = Math.random() * 70 + 5;
        this.rotation = Math.random() * 360;
        this.rotationSpeed = (Math.random() - 0.5) * 2;
        this.xSpeed = windSpeed * Math.cos(radian);
        this.ySpeed = windSpeed * Math.sin(radian);
      }
      var _proto = Particle.prototype;
      _proto.update = function update() {
        this.y += this.speed + this.ySpeed;
        this.x += this.xSpeed;
        this.rotation += this.rotationSpeed;
        if (this.y > canvas.height) {
          this.y = -this.size;
          this.x = Math.random() * canvas.width;
        }
        if (this.x > canvas.width) {
          this.x = 0;
        } else if (this.x < 0) {
          this.x = canvas.width;
        }
      };
      _proto.draw = function draw() {
        context.save();
        context.translate(this.x, this.y);
        context.rotate(this.rotation * Math.PI / 180);
        context.drawImage(img, -this.size / 2, -this.size / 2, this.size, this.size);
        context.restore();
      };
      return Particle;
    }();
    for (var i = 0; i < particleCount; i++) {
      particles.push(new Particle());
    }
    var animate = function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      particles.forEach(function (particle) {
        particle.update();
        particle.draw();
      });
      requestAnimationFrame(animate);
    };
    img.onload = animate;
    var handleResize = function handleResize() {
      if (canvas) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
    };
    window.addEventListener('resize', handleResize);
    return function () {
      window.removeEventListener('resize', handleResize);
    };
  }, [imageSrc, windSpeed, windDirection, particleCount]);
  return React__default.createElement("canvas", {
    ref: canvasRef,
    style: {
      display: 'block'
    }
  });
};

exports.Snowfall = Snowfall;
//# sourceMappingURL=snowfallreact.cjs.development.js.map