Skip to content

Instantly share code, notes, and snippets.

@luandevpro luandevpro/Spring.js
Created May 21, 2019

Embed
What would you like to do?
import React, { useState } from 'react';
import { Transition } from 'react-spring/renderprops';
import Nav from './Nav';
function UseSpring() {
const [display, setDisplay] = useState(false);
return (
<div>
<Transition
items={display}
from={{ transform: 'translate3d(-100%,0,0)' }}
enter={{ transform: 'translate3d(0,0,0)', bgOpacity: 1 }}
leave={{ transform: 'translate3d(-150%,0,0)', bgOpacity: 0 }}
>
{display => (display
? styles => (
<Nav
display={display}
setDisplay={setDisplay}
style={{
transform: styles.transform,
...styles,
}}
/>
)
: null)
}
</Transition>
<div style={{ zIndex: 9 }}>
<button onClick={() => setDisplay(!display)}>show</button>
</div>
</div>
);
}
export default UseSpring;
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.