// blinkWithCssProp.js
export default function blinkWithCssProp(args) {
const { el, cssPropToChange, value, time } = {
el: null, cssPropToChange: 'borderColor', value: 'red', time: 500, ...args
}
if (!el) return
if (el.hasAttribute('blinking')) return
el.setAttribute('blinking', '')
const initValue = el.style[cssPropToChange]
el.style[cssPropToChange] = value
setTimeout(() => {
el.style[cssPropToChange] = initValue
el.removeAttribute('blinking')
}, time)
}
import blinkWithCssProp from '../../../../helpers/functions/blinkWithCssProp'
const style = { padding: '10px', margin: '10px' }
function Component() {
const blinkWithBorders = (e) => blinkWithCssProp({ el: e.target })
const blinkWithBackground = (e) => blinkWithCssProp({
el: e.target,
cssPropToChange: 'background',
value: 'orange',
time: 1000
})
return (
<>
<button style={style} onClick={blinkWithBorders}>Blink borders</button>
<button style={style} onClick={blinkWithBackground}>Blink background</button>
</>
)
}