react-spring-bottom-sheet

import { useState, useRef } from 'react'; import { BottomSheet, BottomSheetRef } from 'react-spring-bottom-sheet'; import 'react-spring-bottom-sheet/dist/style.css'; function MyBottomSheetComponent() { const [open, setOpen] = useState(false); const sheetRef = useRef<BottomSheetRef>(null); const handleDismiss = () => { console.log('Sheet dismissed'); setOpen(false); }; const handleSnapToMax = () => { if (sheetRef.current) { sheetRef.current.snapTo(({ maxHeight }) => maxHeight); } }; return ( <> <button onClick={() => setOpen(true)}>Open Bottom Sheet</button> <BottomSheet open={open} onDismiss={handleDismiss} ref={sheetRef} snapPoints={({ minHeight, maxHeight }) => [ minHeight, maxHeight * 0.5, maxHeight, ]} header={<div>Sheet Header</div>} footer={<div>Sheet Footer</div>} > <div style={{ padding: '16px' }}> <h2>Welcome to the Bottom Sheet!</h2> <p>This is some content inside the sheet. You can drag it up or down to different snap points.</p> <p>The sheet will automatically adjust its height based on the content or snap to predefined points.</p> <button onClick={handleSnapToMax}>Expand to full height</button> </div> </BottomSheet> </> ); } export default MyBottomSheetComponent;