Untitled
plain_text
a month ago
1.3 kB
3
Indexable
Never
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', }} /> ); }