react-components/cursor.jsx

"use client";
import {createContext, useContext, useEffect, useRef, useState} from 'react';
import { gsap } from 'gsap';

const CursorContext = createContext();

export function CursorProvider ({ hidden, enabled, children }) {
    const [isCursorHidden, setIsCursorHidden] = useState(hidden);
    const [isCursorEnabled, setIsCursorEnabled] = useState(enabled);
    const [isCursorInViewport, setIsCursorInViewport] = useState(false);

    const toggleCursor = () => setIsCursorHidden(!isCursorHidden);
    const toggleCursorEnabled = () => {
        setIsCursorEnabled(!isCursorEnabled);
        localStorage.setItem('cursorEnabled', JSON.stringify(!isCursorEnabled));
    }

    const cursorRef = useRef(null);

    useEffect(() => {
        const moveCursor = (e) => {
            const { clientX: x, clientY: y } = e;

            setIsCursorInViewport((x > 0 && x < window.innerWidth) && (y > 0 && y < window.innerHeight));

            gsap.to(cursorRef.current, {
                x: x - 16,
                y: y - 16,
                duration: 0.1,
                ease: "power3.out",
            });

            const savedCursorState = localStorage.getItem('cursorEnabled');
            if (savedCursorState !== null) {
                setIsCursorEnabled(JSON.parse(savedCursorState));
            }
        };

        window.addEventListener('mousemove', moveCursor);

        return () => {
            window.removeEventListener('mousemove', moveCursor);
        };
    }, []);

    const isTouchDevice = "ontouchstart" in window;

    useEffect(() => {
        const htmlElement = document.documentElement;
        if (isCursorEnabled & !isTouchDevice) {
            htmlElement.classList.add('custom-cursor-enabled-env');
        } else {
            htmlElement.classList.remove('custom-cursor-enabled-env');
        }
    }, [isCursorEnabled]);

    return (
        <>
            <CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}>
                {isCursorEnabled & !isTouchDevice ?
                    <div
                        ref={cursorRef}
                        className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !isCursorEnabled || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}
                    />
                    : null
                }
                {children}
            </CursorContext.Provider>
        </>
    );
}

export function useCursor() {
    return useContext(CursorContext);
}