# Hook Pulse Effect(1)

By [James Quinn](https://paragraph.com/@james-quinn) · 2023-11-02

---

    /* eslint-disable-next-line no-param-reassign */
    import React, { useEffect } from "react"
    import styles from "./Button.module.css"
    
    interface Props {
      ref?: React.RefObject<HTMLButtonElement>
      pulseRef?: React.RefObject<HTMLDivElement>
      pulseColor?: string
    }
    
    const usePulseEffect = ({ ref, pulseRef, pulseColor }: Props) => {
      useEffect(() => {
        const handleMouseClick = async (event: any) => {
          pulseRef.current.classList.remove(styles.pulse__effect)
          const posX = event?.clientX
          const posY = event?.clientY
    
          const topY = ref.current.getBoundingClientRect().top
          const leftX = ref.current.getBoundingClientRect().left
    
          const offsetX = posX - leftX
          const offsetY = posY - topY
    
          pulseRef.current.style.left = `${offsetX}px`
          pulseRef.current.style.top = `${offsetY}px`
          pulseRef.current.style.backgroundColor = pulseColor || "white"
    
          pulseRef.current.classList.add(styles.pulse__effect)
        }
    
        if (ref?.current && pulseRef?.current) {
          ref.current.removeEventListener("click", handleMouseClick)
          ref.current.addEventListener("click", handleMouseClick)
        }
      }, [ref, pulseRef])
    }
    
    export default usePulseEffect
    

**I shared this codebase to support core UI development of frontend engineers.I will continue to post in the next entry.**

---

*Originally published on [James Quinn](https://paragraph.com/@james-quinn/hook-pulse-effect-1)*