I am a frontend wizard & shipping machine 🧙 🛳️ - 99.9% high quality code + 0.01% human bug


Share Dialog
Share Dialog
I am a frontend wizard & shipping machine 🧙 🛳️ - 99.9% high quality code + 0.01% human bug

Subscribe to James Quinn

Subscribe to James Quinn
<100 subscribers
<100 subscribers
/* 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.
/* 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.
No activity yet