Skip to content

Instantly share code, notes, and snippets.

@koss-lebedev koss-lebedev/App.tsx
Created Nov 18, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.