Advertisement
Guest User

Galaxy Button BG Override

a guest
Feb 11th, 2023
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.01 KB | Source Code | 0 0
  1. import type { ComponentType } from "react"
  2. import { useRef, useState } from "react"
  3. import { useEffect } from "react"
  4. import { useSpring, animated } from "react-spring"
  5.  
  6. export function withCursorFollow(Component): ComponentType {
  7.     return (props) => {
  8.         const ref = useRef(null)
  9.         const [isHovering, setIsHovering] = useState(false)
  10.         const [originalPosition, setOriginalPosition] = useState({
  11.             left: 0,
  12.             top: 0,
  13.         })
  14.         const [centerPosition, setCenterPosition] = useState({
  15.             left: 0,
  16.             top: 0,
  17.         })
  18.         const springProps = useSpring({
  19.             left: isHovering ? originalPosition.left : centerPosition.left,
  20.             top: isHovering ? originalPosition.top : centerPosition.top,
  21.             config: { mass: 1, tension: 170, friction: 26 },
  22.         })
  23.         useEffect(() => {
  24.             if (!ref.current) return
  25.             const buttonRect = ref.current.getBoundingClientRect()
  26.             const elementRect = ref.current.getBoundingClientRect()
  27.             setCenterPosition({
  28.                 left: buttonRect.width / 2 - elementRect.width / 2,
  29.                 top: buttonRect.height / 2 - elementRect.height / 2,
  30.             })
  31.  
  32.             const handleMouseMove = (e) => {
  33.                 if (!ref.current) return
  34.                 if (e.target.closest("button")) {
  35.                     setIsHovering(true)
  36.                     const buttonRect = e.target.getBoundingClientRect()
  37.                     const elementRect = ref.current.getBoundingClientRect()
  38.                     setOriginalPosition({
  39.                         left:
  40.                             buttonRect.left +
  41.                             buttonRect.width / 2 -
  42.                             (e.clientX + elementRect.width / 2),
  43.                         top:
  44.                             buttonRect.top +
  45.                             buttonRect.height / 2 -
  46.                             (e.clientY + elementRect.height / 2),
  47.                     })
  48.                     setCenterPosition({
  49.                         left: buttonRect.width / 2 - elementRect.width / 2,
  50.                         top: buttonRect.height / 2 - elementRect.height / 2,
  51.                     })
  52.                 } else {
  53.                     setIsHovering(false)
  54.                 }
  55.             }
  56.  
  57.             window.addEventListener("mousemove", handleMouseMove)
  58.             return () => {
  59.                 window.removeEventListener("mousemove", handleMouseMove)
  60.             }
  61.         }, [])
  62.  
  63.         return (
  64.             <animated.div
  65.                 ref={ref}
  66.                 style={{
  67.                     position: "absolute",
  68.                     pointerEvents: "none",
  69.                     left: springProps.left,
  70.                     top: springProps.top,
  71.                     transform: "translate3d(0, 0, 0)",
  72.                     transformStyle: "preserve-3d",
  73.                 }}
  74.             >
  75.                 <Component {...props} />
  76.             </animated.div>
  77.         )
  78.     }
  79. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement