import React from "react" | |
import { useSpring, animated } from "react-spring" | |
const App = () => { | |
const [isExpanded, setExpanded] = React.useState(false); | |
const ref = React.useRef<HTMLDivElement>(null); | |
const style = useSpring({ | |
width: isExpanded ? vwToPixel(100) : "200px", | |
height: isExpanded ? vhToPixel(100) : "200px", | |
borderRadius: isExpanded ? "0px" : "10px", | |
onRest: () => { | |
if (isExpanded && ref.current) { | |
ref.current.style.height = "100vh"; | |
ref.current.style.width = "100vw"; | |
} | |
} | |
}); | |
return ( | |
<animated.div | |
className="box" | |
style={style} | |
ref={ref} | |
onClick={() => setExpanded(!isExpanded)} | |
> | |
I am a box | |
</animated.div> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment