Breaking News: Grepper is joining You.com. Read the official announcement!

framer custom cursor

Cabs answered on October 1, 2023 Popularity 3/10 Helpfulness 7/10

answer framer custom cursor

framer custom cursor

Comment

import type { ComponentType } from "react"
import { useRef, useState, useEffect } from "react"

export function withCursorFollow(Component: ComponentType): ComponentType {
    return (props: any) => {
        const ref = useRef(null)
        const [isHovering, setIsHovering] = useState(false)
        const [position, setPosition] = useState({ left: 0, top: 0 })

        useEffect(() => {
            const handleMouseMove = (e: MouseEvent) => {
                if (!ref.current) return
                const isHovered =
                    e.target instanceof Element &&
                    (e.target === ref.current.parentElement ||
                        ref.current.parentElement.contains(e.target) ||
                        e.target === ref.current ||
                        ref.current.contains(e.target))
                setIsHovering(isHovered)

                if (isHovered) {
                    const parentRect =
                        ref.current.parentElement.getBoundingClientRect()
                    const elementRect = ref.current.getBoundingClientRect()
                    setPosition({
                        left:
                            e.clientX - parentRect.left - elementRect.width / 2,
                        top:
                            e.clientY - parentRect.top - elementRect.height / 2,
                    })
                } else {
                    setIsHovering(false)
                }
            }

            window.addEventListener("mousemove", handleMouseMove)
            return () => {
                window.removeEventListener("mousemove", handleMouseMove)
            }
        }, [])

        return (
            <div
                ref={ref}
                style={{
                    position: "fixed",
                    left: `calc(${position.left}px - 0.1%)`,
                    top: `calc(${position.top}px - 0.1%)`,
                    pointerEvents: "none",
                    transform: "translate(-0.1%, -0.1%)",
                }}
            >
                {isHovering && <Component {...props} />}
            </div>
        )
    }
}

Popularity 3/10 Helpfulness 7/10 Language javascript

Source: manuelogomigo.notion.site

Tags: custom-cursor javascript

Link to this answer
Share Copy Link

Contributed on Oct 01 2023

Cabs

0 Answers Avg Quality 2/10

framer custom cursor

Contents

More Related Answers

framer custom cursor

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.