mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
31 lines
778 B
JavaScript
31 lines
778 B
JavaScript
import React, { useEffect, useRef } from 'react'
|
|
import VanillaTilt from 'vanilla-tilt'
|
|
import useMedia from '../lib/use-media'
|
|
|
|
// NOTE(@lachlanjc): only pass one child!
|
|
const Tilt = ({ options = {}, children, ...props }) => {
|
|
const root = useRef(null)
|
|
|
|
const { matches: enabled } = useMedia('(hover: hover)')
|
|
|
|
useEffect(() => {
|
|
if (enabled) {
|
|
VanillaTilt.init(root.current, {
|
|
max: 7.5,
|
|
scale: 1.05,
|
|
speed: 400,
|
|
glare: true,
|
|
'max-glare': 0.25,
|
|
gyroscope: false,
|
|
...options
|
|
})
|
|
}
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
return () => root.current?.vanillaTilt?.destroy()
|
|
}, [options, enabled])
|
|
|
|
return React.cloneElement(children, { ref: root })
|
|
}
|
|
|
|
export default Tilt
|