{"library":"react-spring-bottom-sheet","title":"React Spring Bottom Sheet","description":"react-spring-bottom-sheet is a React component library designed for creating accessible, animated bottom sheets (also known as bottom drawers or modals) for web applications. It is built upon the `react-spring` library for physics-based animations and `react-use-gesture` for robust gesture control, delivering a smooth and interactive user experience. The current stable version is 3.4.1, which includes support for React 18. Key features include content drag expansion, customizable snap points, and an opt-out focus trap for accessibility. The library differentiates itself by its focus on combining delightful animations with strong accessibility standards through its underlying animation libraries and CSS custom properties for styling. While not adhering to a strict time-based release schedule, the project is actively maintained with updates addressing bug fixes, dependency compatibility, and new features as needed.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-spring-bottom-sheet"],"cli":null},"imports":["import { BottomSheet } from 'react-spring-bottom-sheet'","import type { BottomSheetRef } from 'react-spring-bottom-sheet'","import 'react-spring-bottom-sheet/dist/style.css'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState, useRef } from 'react';\nimport { BottomSheet, BottomSheetRef } from 'react-spring-bottom-sheet';\nimport 'react-spring-bottom-sheet/dist/style.css';\n\nfunction MyBottomSheetComponent() {\n  const [open, setOpen] = useState(false);\n  const sheetRef = useRef<BottomSheetRef>(null);\n\n  const handleDismiss = () => {\n    console.log('Sheet dismissed');\n    setOpen(false);\n  };\n\n  const handleSnapToMax = () => {\n    if (sheetRef.current) {\n      sheetRef.current.snapTo(({ maxHeight }) => maxHeight);\n    }\n  };\n\n  return (\n    <>\n      <button onClick={() => setOpen(true)}>Open Bottom Sheet</button>\n      <BottomSheet\n        open={open}\n        onDismiss={handleDismiss}\n        ref={sheetRef}\n        snapPoints={({ minHeight, maxHeight }) => [\n          minHeight,\n          maxHeight * 0.5,\n          maxHeight,\n        ]}\n        header={<div>Sheet Header</div>}\n        footer={<div>Sheet Footer</div>}\n      >\n        <div style={{ padding: '16px' }}>\n          <h2>Welcome to the Bottom Sheet!</h2>\n          <p>This is some content inside the sheet. You can drag it up or down to different snap points.</p>\n          <p>The sheet will automatically adjust its height based on the content or snap to predefined points.</p>\n          <button onClick={handleSnapToMax}>Expand to full height</button>\n        </div>\n      </BottomSheet>\n    </>\n  );\n}\n\nexport default MyBottomSheetComponent;","lang":"typescript","description":"Demonstrates a controlled bottom sheet with open/close functionality, programmatic snap-to, multiple snap points, and custom header/footer. It includes the necessary CSS import.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}