Animate toggle of div with React Spring

Question

I have a child component that I'm trying to get to slide into view using react-spring. However, I'm unsure how to trigger that animation with react-spring.

I believe I should be able to use react-spring to adjust the position of the BottomSheetComponent with style={{transform: 'translateY(calc(-40vh + 0px))'}}, where I could have a start position of 0vh and adjust it to -50vh.

The key question is:

How to properly implement the react-spring functionality to trigger the component to slide into view on click

App.js

function App() {
  const [toggle, setToggle] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  }

  return (
    <div classNameName="App">
    <button onClick={handleToggle}>Toggle Bottom Sheet</button>
      {toggle && <BottomSheetComponent toggle={toggle} header="My Custom Title" subHeader="Some more information here">
      This is the body of the component
      </BottomSheetComponent>}
    </div>
  );
}

export default App;

BottomSheetComponent.js

import { useSpring, animated, interpolate, config } from "react-spring/hooks";
const BottomSheet = (props) => {
    console.log(props)
    const theme = useTheme();
    const classes = useStyles({ theme })

    return (
       <div className={classes.bottomSheetContainer} style={{transform: 'translateY(calc(-40vh + 0px))'}}>
            <div className={classes.headerDragger}></div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                className={classes.closeButton} style={{ position: 'absolute', right: 16, top: 16 }}>
                <path d="M17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071Z" fill="#191919"></path></svg>
            <h1 className={classes.header}>{props.header}</h1>
            <h2 className={classes.subHeader}>{props.subHeader}</h2>
            <div>
                <div className={classes.contentContainer}>
                    <div style={{ background: 'linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229))', height: 800 }}>
                        <h1 style={{ color: '#ffffff', padding: 8, fontSize: 18 }}>
                            {props.children}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    )
}

Animate toggle of div with React Spring

0 Answers0