swiper and clean

src/hooks/useBackgroundAttrs.js

@@ -0,0 +1,36 @@
+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])
+}