Untitled

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [isCustomCursor, setIsCustomCursor] = useState(false);

  function handleChange() {
    setIsCustomCursor(!isCustomCursor);
  }

  return (
    <>
      <label>
        <input type="checkbox" onChange={handleChange}/>
        Включить неоновый курсор
      </label>
      {isCustomCursor && <NeonCursor/>}
    </>
  );
}

function NeonCursor() {
  const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setCursorPosition({
        top: e.pageY,
        left: e.pageX,
      });
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.documentElement.classList.add('no-cursor');

    return () => {
      document.documentElement.classList.remove('no-cursor');
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <img
      src="https://code.s3.yandex.net/web-code/react/cursor.svg"
      width={30}
      style={{
        position: 'absolute',
        top: cursorPosition.top,
        left: cursorPosition.left,
        pointerEvents: 'none',
      }}
    />
  );
}