37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import { useEffect } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
export default function useBackgroundAttrs(containerRef) {
|
|
const { pathname } = useLocation()
|
|
useEffect(() => {
|
|
const el = containerRef.current
|
|
if (!el) return
|
|
|
|
// data-bg-src → background-image
|
|
el.querySelectorAll('[data-bg-src]').forEach(el => {
|
|
el.style.backgroundImage = 'url(' + el.dataset.bgSrc + ')'
|
|
el.removeAttribute('data-bg-src')
|
|
el.classList.add('background-image')
|
|
})
|
|
|
|
// data-bg-color → background-color
|
|
el.querySelectorAll('[data-bg-color]').forEach(el => {
|
|
el.style.backgroundColor = el.dataset.bgColor
|
|
el.removeAttribute('data-bg-color')
|
|
})
|
|
|
|
// data-border → CSS var
|
|
el.querySelectorAll('[data-border]').forEach(el => {
|
|
el.style.setProperty('--th-border-color', el.dataset.border)
|
|
})
|
|
|
|
// data-mask-src → mask-image
|
|
el.querySelectorAll('[data-mask-src]').forEach(el => {
|
|
el.style.maskImage = 'url(' + el.dataset.maskSrc + ')'
|
|
el.style.webkitMaskImage = 'url(' + el.dataset.maskSrc + ')'
|
|
el.classList.add('bg-mask')
|
|
el.removeAttribute('data-mask-src')
|
|
})
|
|
}, [containerRef, pathname])
|
|
}
|