# Hook Pulse Effect(1)

**Published by:** [James Quinn](https://paragraph.com/@james-quinn/)
**Published on:** 2023-11-02
**URL:** https://paragraph.com/@james-quinn/hook-pulse-effect-1

## Content

/* 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.

## Publication Information

- [James Quinn](https://paragraph.com/@james-quinn/): Publication homepage
- [All Posts](https://paragraph.com/@james-quinn/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@james-quinn): Subscribe to updates