leumas-react-flashlights/src/FlashLight/FlashLight.jsx

Simple CSS Flashlight effect for any Component or React Page, Perfect for Coming Soon Pages or any other creative website. Should not need any updates, but I might create more in the near future to compliment the Flashlight component

import React, { useEffect } from 'react';
import './FlashLight.css';

const FlashLight = ({ children }) => {
  useEffect(() => {
    const isTouchDevice = () => {
      try {
        document.createEvent('TouchEvent');
        return true;
      } catch (e) {
        return false;
      }
    };

    const getMousePosition = (e) => {
      const mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
      const mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;

      const flashlight = document.getElementById('flashlight');
      if (flashlight) {
        flashlight.style.setProperty('--Xpos', mouseX + 'px');
        flashlight.style.setProperty('--Ypos', mouseY + 'px');
      }
    };

    document.addEventListener('mousemove', getMousePosition);
    document.addEventListener('touchmove', getMousePosition);

    return () => {
      document.removeEventListener('mousemove', getMousePosition);
      document.removeEventListener('touchmove', getMousePosition);
    };
  }, []);

  return (
    <div className="flashlight-container">
      <div id="flashlight"></div>
      <div className="flashlight-content">
        {children}
      </div>
    </div>
  );
};

export default FlashLight;