### Install react-spring-bottom-sheet

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md

Install the react-spring-bottom-sheet package using npm. This is the first step to integrating the bottom sheet component into your React application.

```bash
npm i react-spring-bottom-sheet
```

--------------------------------

### Configuring PostCSS for BottomSheet CSS Custom Properties

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md

Provides a PostCSS configuration example to enable the use of CSS Custom Properties fallbacks for the react-spring-bottom-sheet. This setup requires installing `postcss-custom-properties-fallback` and pointing it to the library's default JSON configuration file.

```js
module.exports = {
  plugins: {
    // Ensures the default variables are available
    'postcss-custom-properties-fallback': {
      importFrom: require.resolve('react-spring-bottom-sheet/defaults.json'),
    },
  },
}
```

--------------------------------

### BottomSheet with TypeScript and snapTo API

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md

Illustrates how to use the BottomSheet component with TypeScript, specifically leveraging the `BottomSheetRef` for imperative control. This example shows how to access the ref and use the `snapTo` API to programmatically control the sheet's position, providing full typing for its arguments.

```tsx
import { useRef } from 'react'
import { BottomSheet, BottomSheetRef } from 'react-spring-bottom-sheet'

export default function Example() {
  const sheetRef = useRef<BottomSheetRef>()
  return (
    <BottomSheet open ref={sheetRef}>
      <button
        onClick={() => {
          // Full typing for the arguments available in snapTo, yay!!
          sheetRef.current.snapTo(({ maxHeight }) => maxHeight)
        }}
      >
        Expand to full height
      </button>
    </BottomSheet>
  )
}
```

--------------------------------

### Basic Usage of BottomSheet Component in React

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md

Demonstrates the fundamental usage of the BottomSheet component. It involves importing necessary hooks and the BottomSheet component itself, managing its open state with useState, and rendering a button to control its visibility. The CSS is imported to ensure proper styling.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

// if setting up the CSS is tricky, you can add this to your page somewhere:
// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
import 'react-spring-bottom-sheet/dist/style.css'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <BottomSheet open={open}>My awesome content here</BottomSheet>
    </>
  )
}
```

--------------------------------

### Basic Bottom Sheet with Ref Usage

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

A simple example demonstrating how to create a bottom sheet component and attach a ref to it. This allows for programmatic control of the sheet's state and behavior through the ref object.

```jsx
export default function Example() {
  const sheetRef = React.useRef()
  return <BottomSheet open ref={sheetRef} />
}
```

--------------------------------

### Customizing BottomSheet CSS with Custom Properties

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md

Shows how to customize the visual appearance of the react-spring-bottom-sheet using CSS Custom Properties (variables). This snippet lists the available variables for modifying aspects like background color, handle color, maximum width, and safe area insets.

```css
:root {
  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
  --rsbs-bg: #fff;
  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
  --rsbs-max-w: auto;
  --rsbs-ml: env(safe-area-inset-left);
  --rsbs-mr: env(safe-area-inset-right);
  --rsbs-overlay-rounded: 16px;
}
```

--------------------------------

### Configuring Multiple Snap Points in React Bottom Sheet

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

Illustrates how to configure a bottom sheet to snap to multiple predefined heights. This example uses `useRef` to control the sheet imperatively and defines snap points based on viewport height. It also showcases programmatic control over snapping and velocity-based animations, along with event handling for drag interactions.

```jsx
import { useRef, useState } from 'react'
import { BottomSheet, BottomSheetRef } from 'react-spring-bottom-sheet'

function SnapExample() {
  const sheetRef = useRef<BottomSheetRef>()
  const [open, setOpen] = useState(true)

  return (
    <BottomSheet
      open={open}
      ref={sheetRef}
      onDismiss={() => setOpen(false)}
      // Define three snap points: 90% height, 25% height, and 60% height
      snapPoints={({ maxHeight }) => [
        maxHeight - maxHeight / 10,
        maxHeight / 4,
        maxHeight * 0.6,
      ]}
      // Start at middle height, or remember user's last position
      defaultSnap={({ lastSnap, snapPoints }) =>
        lastSnap ?? snapPoints[1]
      }
      onSpringStart={(event) => {
        if (event.type === 'SNAP' && event.source === 'dragging') {
          console.log('User dragged to new snap point')
        }
      }}
    >
      <div style={{ padding: '16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '8px' }}>
          <button onClick={() => sheetRef.current.snapTo(({ snapPoints }) => Math.max(...snapPoints))}>
            Expand to Top
          </button>
          <button onClick={() => sheetRef.current.snapTo(({ maxHeight }) => maxHeight / 2)}>
            Go to Middle
          </button>
          <button onClick={() => sheetRef.current.snapTo(({ snapPoints }) => Math.min(...snapPoints))}>
            Minimize
          </button>
        </div>

        <p>Drag the sheet or use buttons to change height</p>
        <p>Current height: {sheetRef.current?.height}px</p>
      </div>
    </BottomSheet>
  )
}
```

--------------------------------

### Implementing Sticky Header and Footer in React Bottom Sheet

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

Shows how to implement a bottom sheet with sticky header and footer elements that remain visible while the content scrolls. This example defines custom JSX for both the header and footer, allowing for interactive elements and persistent UI sections within the bottom sheet. It also configures snap points for different sheet heights.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

function StickyExample() {
  const [open, setOpen] = useState(true)

  return (
    <BottomSheet
      open={open}
      onDismiss={() => setOpen(false)}
      snapPoints={({ maxHeight }) => [
        maxHeight - maxHeight / 5,
        maxHeight * 0.6,
      ]}
      header={
        <h1 style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '16px',
          fontWeight: 'bold'
        }}>
          Sticky Header (draggable)
        </h1>
      }
      footer={
        <button
          onClick={() => setOpen(false)}
          style={{ width: '100%', padding: '16px' }}
        >
          Done
        </button>
      }
    >
      <div style={{ padding: '16px' }}>
        {Array.from({ length: 20 }, (_, i) => (
          <p key={i}>Scrollable content line {i + 1}</p>
        ))}
      </div>
    </BottomSheet>
  )
}
```

--------------------------------

### Expand on Content Drag for BottomSheet

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

Enables the bottom sheet to expand by dragging the content area, not just the header. This example shows how to use the `expandOnContentDrag` prop to control this behavior and provides a checkbox to toggle it dynamically. It includes scrollable content to demonstrate dragging within the sheet.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

function ContentDragExample() {
  const [expandOnContentDrag, setExpandOnContentDrag] = useState(true)

  return (
    <BottomSheet
      open={true}
      snapPoints={({ maxHeight }) => [
        maxHeight - maxHeight / 10,
        maxHeight / 4,
      ]}
      expandOnContentDrag={expandOnContentDrag}
    >
      <div style={{ padding: '16px' }}>
        <label>
          <input
            type="checkbox"
            checked={expandOnContentDrag}
            onChange={(e) => setExpandOnContentDrag(e.target.checked)}
          />
          Enable drag on content area
        </label>

        <p>
          When enabled, you can drag anywhere in the content area to expand
          the sheet, not just on the header or overlay.
        </p>

        <div style={{ height: '300px', overflowY: 'auto' }}>
          {Array.from({ length: 50 }, (_, i) => (
            <p key={i}>Scrollable content {i + 1}</p>
          ))}
        </div>
      </div>
    </BottomSheet>
  )
}
```

--------------------------------

### Customize react-spring-bottom-sheet Appearance with CSS Variables

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

This CSS snippet illustrates how to customize the visual appearance of the bottom sheet using CSS custom properties (variables). It covers styling for the backdrop, sheet background, drag handle, maximum width, safe area insets, and border radius. It also includes examples for a dark theme and custom styling based on sheet state attributes like `data-rsbs-root` and `data-rsbs-state`.

```css
:root {
  /* Backdrop appearance */
  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
  --rsbs-backdrop-opacity: 1;

  /* Sheet background */
  --rsbs-bg: #ffffff;

  /* Drag handle color */
  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);

  /* Maximum width (useful for desktop) */
  --rsbs-max-w: 600px;

  /* Safe area insets for mobile notches */
  --rsbs-ml: env(safe-area-inset-left);
  --rsbs-mr: env(safe-area-inset-right);

  /* Border radius on top corners */
  --rsbs-overlay-rounded: 16px;

  /* Content opacity during transitions */
  --rsbs-content-opacity: 1;
}

/* Dark theme example */
@media (prefers-color-scheme: dark) {
  :root {
    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.8);
    --rsbs-bg: #1a1a1a;
    --rsbs-handle-bg: hsla(0, 0%, 100%, 0.14);
  }
}

/* Custom data attribute styling based on sheet state */
[data-rsbs-root][data-rsbs-state="opening"] {
  /* Custom styles during opening animation */
}

[data-rsbs-root][data-rsbs-is-blocking="true"] {
  /* Custom styles for blocking mode */
}

```

--------------------------------

### Implement Non-Blocking Sidebar Mode with React Bottom Sheet

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

This example demonstrates using `react-spring-bottom-sheet` as a non-modal sidebar. By setting `blocking={false}` and `scrollLocking={false}`, the bottom sheet does not trap focus or block interaction with the main content. The `header` prop can be used for custom elements like search inputs. The `snapPoints` prop allows for defining custom heights for the sheet.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

function SidebarExample() {
  const [open, setOpen] = useState(true)

  return (
    <div>
      <main style={{ padding: '20px' }}>
        <h1>Main Content</h1>
        <p>This content remains interactive when sheet is open</p>
        <button onClick={() => setOpen(!open)}>
          {open ? 'Hide' : 'Show'} Sidebar
        </button>
      </main>

      <BottomSheet
        open={open}
        onDismiss={() => setOpen(false)}
        blocking={false}  // No backdrop, no focus trap, no scroll lock
        scrollLocking={false}
        header={
          <input
            type="text"
            placeholder="Search..."
            style={{
              width: '100%',
              padding: '8px',
              borderRadius: '4px'
            }}
          />
        }
        snapPoints={({ maxHeight }) => [
          maxHeight / 4,
          maxHeight * 0.6
        ]}
      >
        <div style={{ padding: '16px' }}>
          <p>Use this as a resizable sidebar panel</p>
          <p>Users can still interact with the main page</p>
        </div>
      </BottomSheet>
    </div>
  )
}

```

--------------------------------

### Handle Initial Open Animation Delay with onSpringStart

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Demonstrates how to use the onSpringStart event with an async function to delay the opening animation of the bottom sheet until data is fetched. This allows displaying a loading state before the sheet fully opens.

```jsx
function Example() {
  const [data, setData] = useState([])
  return (
    <BottomSheet
      onSpringStart={async (event) => {
        if (event.type === 'OPEN') {
          // the bottom sheet gently waits
          const data = await fetch(/* . . . */)
          setData(data)
          // and now we can proceed
        }
      }}
    >
      {data.map(/* . . . */)}
    </BottomSheet>
  )
}
```

--------------------------------

### Log Snap Dragging Event with onSpringStart

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Shows how to use the onSpringStart event handler to detect when a snap animation is initiated by user dragging. It logs a message to the console when the event type is 'SNAP' and the source is 'dragging'.

```jsx
function Example() {
  return (
    <BottomSheet
      onSpringStart={(event) => {
        if (event.type === 'SNAP' && event.source === 'dragging') {
          console.log('Starting a spring animation to user selected snap point')
        }
      }}
    />
  )
}
```

--------------------------------

### Imperative Snap to Bottom with Ref and onSpringEnd

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Illustrates how to programmatically snap the bottom sheet to a specific point using `ref.snapTo` and how to detect the completion of this imperative transition using the onSpringEnd event. It logs a message when a snap-to-bottom transition finishes.

```jsx
function Example() {
  const sheetRef = useRef()
  return (
    <BottomSheet
      ref={sheetRef}
      snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight]}
      onSpringEnd={(event) => {
        if (event.type === 'SNAP' && event.source === 'snap-to-bottom') {
          console.log(
            'Just finished an imperativ transition to the bottom snap point'
          )
        }
      }}
    >
      <button
        onClick={() => sheetRef.current.snapTo(0, { source: 'snap-to-bottom' })}
      >
        Snap to bottom
      </button>
    </BottomSheet>
  )
}
```

--------------------------------

### Animate to Snap Point with snapTo

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

The `snapTo` method animates the bottom sheet to a specified snap point. It accepts either a numeric pixel value or a callback function that returns a numeric height. An optional second argument allows overriding event source and velocity.

```javascript
ref.current.snapTo(200);

ref.current.snapTo(({ headerHeight, footerHeight, height, minHeight, maxHeight, snapPoints, lastSnap }) => {
  return Math.max(...snapPoints);
});

ref.current.snapTo(({ snapPoints }) => Math.min(...snapPoints), {
  source: 'custom',
  velocity: 1,
});
```

--------------------------------

### React Spring Bottom Sheet Props

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Configuration options for controlling the behavior and appearance of the bottom sheet.

```APIDOC
## Props

All props provided are spread onto the underlying `<animated.div>` instance. The component is mounted in a `@reach/portal` at the bottom of `<body>`.

### `open`

- **Type**: `boolean`
- **Required**: Yes
- **Description**: Controls the visibility of the bottom sheet. If `false`, the sheet is not rendered. Ensures accessibility by preventing interaction with a closed sheet.

### `onDismiss`

- **Type**: `() => void`
- **Required**: No
- **Description**: Callback function invoked when the user signals to dismiss the sheet (e.g., pressing `esc`, tapping the backdrop, swiping down).

### `snapPoints`

- **Type**: `(state) => number | number[]`
- **Required**: No
- **Description**: A function that returns a single number or an array of numbers defining the snap points for the sheet's height. The `state` object contains `headerHeight`, `footerHeight`, `height`, `minHeight`, and `maxHeight`.
  - **Example**: `snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight]}`

### `defaultSnap`

- **Type**: `number | (state) => number`
- **Required**: No
- **Description**: Defines the initial snap point when the sheet opens. Can be a fixed number or a function that calculates the snap point based on the `state` object (which includes `snapPoints`, `lastSnap`, `headerHeight`, etc.).
  - **Example**: `defaultSnap={({ lastSnap, snapPoints }) => lastSnap ?? Math.max(...snapPoints)}`

### `header`

- **Type**: `ReactNode`
- **Required**: No
- **Description**: Content to be rendered in the header of the bottom sheet.

### `footer`

- **Type**: `ReactNode`
- **Required**: No
- **Description**: Content to be rendered in the footer of the bottom sheet.

### `sibling`

- **Type**: `ReactNode`
- **Required**: No
- **Description**: Renders the provided node as a sibling to the backdrop and overlay, allowing for elements on top of the bottom sheet but outside its overlay.

### `initialFocusRef`

- **Type**: `React.Ref | false`
- **Required**: No
- **Description**: A React ref to an element that should receive keyboard focus when the sheet opens. If `false`, focus is disabled. If not provided, the first interactive element is focused.

### `blocking`

- **Type**: `boolean`
- **Required**: No
- **Default**: `true`
- **Description**: Enables focus trapping and `aria-hidden` for accessibility, preventing interaction with the background content when the sheet is open.

### `scrollLocking`

- **Type**: `boolean`
- **Required**: No
- **Default**: `true`
- **Description**: Prevents the body from scrolling when the sheet is open, which is useful for mobile browsers. Can be disabled for specific interactive elements within the sheet using `[data-body-scroll-lock-ignore]`.

### `expandOnContentDrag`

- **Type**: `boolean`
- **Required**: No
- **Default**: `false`
- **Description**: Allows the bottom sheet to expand when content within it is dragged, in addition to dragging the header or overlay.
```

--------------------------------

### Basic Bottom Sheet Implementation in React

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

Demonstrates a simple modal bottom sheet with automatic height adjustment and a dismiss functionality. It utilizes the 'BottomSheet' component from 'react-spring-bottom-sheet' and requires basic React hooks for state management. The component is controlled by an 'open' state and can be closed via user interaction or a button click.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'
import 'react-spring-bottom-sheet/dist/style.css'

function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Sheet</button>

      <BottomSheet
        open={open}
        onDismiss={() => setOpen(false)}
        snapPoints={({ minHeight }) => minHeight}
      >
        <div style={{ padding: '16px' }}>
          <h2>My Bottom Sheet</h2>
          <p>Content automatically adjusts height to avoid scrollbars.</p>
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      </BottomSheet>
    </>
  )
}
```

--------------------------------

### Configure Snap Points for Bottom Sheet (React JSX)

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Defines the snap points for the bottom sheet, allowing users to select between minimum height and full screen. The 'snapPoints' prop accepts a function that returns an array of heights based on the sheet's state.

```jsx
import { BottomSheet } from "react-spring-bottom-sheet";

function MyComponent() {
  return (
    <BottomSheet
      snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight]}
    />
  );
}
```

--------------------------------

### Handle Animation Lifecycle Events with Async Support in React

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

This snippet shows how to hook into the animation lifecycle events of a bottom sheet. It utilizes `onSpringStart` to handle asynchronous operations like fetching data before the sheet animates open, and `onSpringEnd` to perform cleanup after the close animation completes. Dependencies include React's `useState` hook and the `BottomSheet` component from `react-spring-bottom-sheet`.

```jsx
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

function AsyncExample() {
  const [open, setOpen] = useState(false)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)

  return (
    <BottomSheet
      open={open}
      onDismiss={() => setOpen(false)}
      onSpringStart={async (event) => {
        if (event.type === 'OPEN') {
          // Sheet waits for async operation before animating open
          setLoading(true)
          const response = await fetch('/api/data')
          const result = await response.json()
          setData(result)
          setLoading(false)
        }
      }}
      onSpringEnd={(event) => {
        if (event.type === 'CLOSE') {
          // Clean up after close animation completes
          setData([])
        }
      }}
      onSpringCancel={(event) => {
        if (event.type === 'OPEN') {
          console.log('Open animation was interrupted (user closed or resized)')
        }
      }}
    >
      <div style={{ padding: '16px' }}>
        {loading ? (
          <p>Loading...</p>
        ) : (
          data.map((item, i) => <div key={i}>{item}</div>)
        )}
      </div>
    </BottomSheet>
  )
}

```

--------------------------------

### TypeScript Integration for BottomSheet

Source: https://context7.com/stipsan/react-spring-bottom-sheet/llms.txt

Demonstrates full TypeScript support for react-spring-bottom-sheet, including type-safe props and ref methods. It shows how to define custom sheet props and interact with the BottomSheetRef for controlled snapping and height access. This ensures type safety throughout the component's usage.

```tsx
import { useRef, useState } from 'react'
import {
  BottomSheet,
  BottomSheetRef,
  BottomSheetProps
} from 'react-spring-bottom-sheet'

interface MySheetProps {
  userId: string
  onComplete: () => void
}

function TypedSheet({ userId, onComplete }: MySheetProps) {
  const sheetRef = useRef<BottomSheetRef>(null)
  const [open, setOpen] = useState(false)

  const handleSnap = () => {
    if (sheetRef.current) {
      // Full type inference for snapTo arguments
      sheetRef.current.snapTo(
        ({ maxHeight, minHeight, snapPoints, lastSnap }) => {
          // Type-safe access to all snap point properties
          return Math.max(...snapPoints)
        },
        {
          source: 'custom-action',  // Custom event source for tracking
          velocity: 2  // Faster animation
        }
      )

      // Type-safe height access
      const currentHeight: number = sheetRef.current.height
      console.log(`Current sheet height: ${currentHeight}px`)
    }
  }

  // Type-safe props
  const sheetProps: BottomSheetProps = {
    open,
    onDismiss: () => setOpen(false),
    snapPoints: ({ minHeight, maxHeight }) => [minHeight, maxHeight],
    defaultSnap: ({ snapPoints, lastSnap }) => lastSnap ?? snapPoints[0],
    blocking: true,
    scrollLocking: true,
    expandOnContentDrag: false,
    skipInitialTransition: false,
    initialFocusRef: false,  // Disable auto-focus
  }

  return (
    <BottomSheet ref={sheetRef} {...sheetProps}>
      <div style={{ padding: '16px' }}>
        <button onClick={handleSnap}>Expand to Top</button>
        <button onClick={onComplete}>Complete</button>
      </div>
    </BottomSheet>
  )
}
```

--------------------------------

### React Spring Bottom Sheet Events

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Handles events triggered by user interactions and state changes within the bottom sheet.

```APIDOC
## Events

All events receive a `SpringEvent` object as an argument, which includes a `type` property indicating the event scenario.

### `SpringEvent` Object

- **Type**: `object`
- **Properties**:
  - **`type`**: (`'OPEN' | 'RESIZE' | 'SNAP' | 'CLOSE'`) - The type of event that occurred.
```

--------------------------------

### Set Default Snap Point for Bottom Sheet (React JSX)

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

Configures the initial position of the bottom sheet when it opens. The 'defaultSnap' prop can be a number or a function that determines the snap point based on previous selections and available snap points.

```jsx
import { BottomSheet } from "react-spring-bottom-sheet";

function MyComponent() {
  return (
    <BottomSheet
      snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight / 0.6]}
      defaultSnap={({ lastSnap, snapPoints }) =>
        lastSnap ?? Math.max(...snapPoints)
      }
    />
  );
}
```

--------------------------------

### Access Current Height with height Property

Source: https://github.com/stipsan/react-spring-bottom-sheet/blob/main/README.md

The `height` property provides the current snap point of the bottom sheet in pixels. This value is updated outside the React render cycle for performance. It can be accessed within lifecycle methods like `onSpringStart` and `onSpringEnd`.

```jsx
export default function Example() {
  const sheetRef = React.useRef()
  return (
    <BottomSheet
      ref={sheetRef}
      onSpringStart={() => {
        console.log('Transition from:', sheetRef.current.height)
        requestAnimationFrame(() =>
          console.log('Transition to:', sheetRef.current.height)
        )
      }}
      onSpringEnd={() =>
        console.log('Finished transition to:', sheetRef.current.height)
      }
    />
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.