System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 18:35:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use a media query instead

Browse source
This commit is contained in:
Caleb Denio 2024-04-03 12:54:01 -04:00
parent 7a62ece572
commit fa95476f50
No known key found for this signature in database
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/tilt.js
View file

@ -1,12 +1,26 @@
import React, { useEffect, useRef } from 'react'
import React, { useEffect, useRef, useState } from 'react'
import VanillaTilt from 'vanilla-tilt'
import { useResponsiveValue } from '@theme-ui/match-media'
function useMedia(query) {
const [matches, setMatches] = useState(false)
useEffect(() => {
const onChange = e => setMatches(e.matches)
const mq = window.matchMedia(query)
setMatches(mq.matches)
mq.addEventListener('change', onChange)
return () => mq.removeEventListener('change', onChange)
}, [query])
return { matches }
}
// NOTE(@lachlanjc): only pass one child!
const Tilt = ({ options = {}, children, ...props }) => {
const root = useRef(null)
const enabled = useResponsiveValue([false, true])
const { matches: enabled } = useMedia('(hover: hover)')
useEffect(() => {
if (enabled) {