### Run Example App Dev Server

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Navigate to the example directory and start the development server for the example app. This should be done in a separate terminal from the library watcher.

```sh
cd example
npm run dev
```

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

### Run Example App with Host Binding

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

To test the example app on your phone, run the example app with `npm run dev:host`. Then, open your computer's local IP address in your phone's browser. Ensure your phone is on the same network as your computer.

```sh
npm run dev:host
```

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

### Install react-modal-sheet

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Install the react-modal-sheet and motion libraries using npm.

```bash
npm install react-modal-sheet motion
```

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

### Install react-modal-sheet

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Install the react-modal-sheet package using npm.

```sh
npm install react-modal-sheet
```

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

### Install yalc Globally

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Install yalc globally to manage local package dependencies. This is a prerequisite for the local development setup.

```sh
npm i yalc -g
```

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

### Install Dependencies and Configure Yalc

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Install project dependencies, build the library, and configure yalc for local linking. Run these commands in the project root.

```sh
npm install
npm run build
npm run link
```

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

### Start Library Watcher

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Start a watcher process to continuously build the library as you make changes. This command should be run in the project root.

```sh
npm run dev
```

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

### Install Motion Peer Dependency

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Install the Motion library, a peer dependency for gestures and animations, using npm.

```sh
npm install motion
```

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

### Imperative snapTo Method Example

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Demonstrates how to use the imperative `snapTo` method on a `SheetRef` to programmatically control the sheet's position to a specified snap point index. Requires initializing the sheet with `snapPoints` and a `ref`.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useState, useRef } from 'react';

const snapPoints = [0, 0.5, 1];

function SnapExample() {
  const [isOpen, setOpen] = useState(false);
  const sheetRef = useRef<SheetRef>(null);
  const snapTo = (i: number) => sheetRef.current?.snapTo(i);

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

      {/* Opens to 50% since initial index is 1 * /}
      <Sheet
        ref={sheetRef}
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        initialSnap={1}
        snapPoints={snapPoints}
        onSnap={(snapIndex) =>
          console.log('Current snap point index:', snapIndex)
        }
      >
        <Sheet.Container>
          <Sheet.Content>
            <button onClick={() => snapTo(0)}>Snap to index 0</button>
            <button onClick={() => snapTo(1)}>Snap to index 1</button>
            <button onClick={() => snapTo(2)}>Snap to index 2</button>
          </Sheet.Content>
        </Sheet.Container>
      </Sheet>
    </>
  );
}
```

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

### Implement Custom Scroller with Utility Hooks

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Create a custom scrollable area by disabling default scrolling and using `useScrollPosition` and `useVirtualKeyboard` hooks. This example demonstrates managing scroll position and keyboard inset for a custom scroller.

```tsx
import {
  Sheet,
  useScrollPosition,
  useVirtualKeyboard,
} from 'react-modal-sheet';

function CustomScrollerExample() {
  const [isOpen, setOpen] = useState(false);

  const { scrollRef, scrollPosition } = useScrollPosition({
    isEnabled: isOpen,
  });

  const { keyboardHeight } = useVirtualKeyboard({
    isEnabled: isOpen,
  });

  /**
   * If you use `var(--keyboard-inset-height)` CSS variable you can just call
   * `useVirtualKeyboard()` without destructuring anything from it:
   *
   * useVirtualKeyboard({ isEnabled: isOpen });
   */

  return (
    // Disable default keyboard avoidance
    <Sheet avoidKeyboard={false} isOpen={isOpen} onClose={() => setOpen(false)}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content
          // Disable default scrolling
          disableScroll
          // Dragging is still managed by `Sheet.Content` so we control it here
          disableDrag={scrollPosition !== 'top'}
        >
          <div
            style={{
              // Use CSS variable managed by `useVirtualKeyboard`
              paddingBottom: 'var(--keyboard-inset-height)',
              // Alternatively apply keyboard padding via pixel value (maybe you want to add some extra padding to it)
              paddingBottom: keyboardHeight,
              // Some layout styles for custom content
              height: '100%',
              display: 'grid',
              gridTemplateRows: 'auto 1fr auto',
            }}
          >
            <div>Some content here...</div>

            <div
              // Pass ref to the custom scroller so we can track its scroll position
              ref={scrollRef}
              // Make it scrollable
              style={{ overflowY: 'auto' }}
            >
              <div style={{ height: '400vh' }}>Long content here...</div>
            </div>

            <div>More content here...</div>
          </div>
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Accessible Modal Sheet with React Aria

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

This example demonstrates integrating react-modal-sheet with React Aria hooks (useOverlay, useModal, useDialog, useButton) to create an accessible modal bottom sheet. It includes focus management and screen reader support. Ensure React Aria is installed and configured in your project.

```tsx
import { Sheet } from 'react-modal-sheet';
import { useRef } from 'react';
import { useOverlayTriggerState } from 'react-stately';

import {
  useOverlay,
  useModal,
  OverlayProvider,
  FocusScope,
  useButton,
  useDialog,
} from 'react-aria';

function A11yExample() {
  const sheetState = useOverlayTriggerState({});
  const openButtonRef = useRef(null);
  const openButton = useButton({ onPress: sheetState.open }, openButtonRef);

  return (
    <div>
      <button {...openButton.buttonProps} ref={openButtonRef}>
        Open sheet
      </button>

      <Sheet isOpen={sheetState.isOpen} onClose={sheetState.close}>
        <OverlayProvider>
          <FocusScope contain autoFocus restoreFocus>
            <SheetComp sheetState={sheetState} />
          </FocusScope>
        </OverlayProvider>
      </Sheet>
    </div>
  );
}

function SheetComp({ sheetState }) {
  const containerRef = useRef(null);
  const dialog = useDialog({}, containerRef);
  const overlay = useOverlay(
    { onClose: sheetState.close, isOpen: true, isDismissable: true },
    containerRef
  );

  const closeButtonRef = useRef(null);
  const closeButton = useButton(
    { onPress: sheetState.close, 'aria-label': 'Close sheet' },
    closeButtonRef
  );

  useModal();

  // In real world usage this would be a separate React component
  const customHeader = (
    <div>
      <span {...dialog.titleProps}>Some title for sheet</span>
      <button {...closeButton.buttonProps}>🅧</button>
    </div>
  );

  return (
    <>
      <Sheet.Container
        {...overlay.overlayProps}
        {...dialog.dialogProps}
        ref={containerRef}
      >
        <Sheet.Header>{customHeader}</Sheet.Header>
        <Sheet.Content>{/*...*/}</Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </>
  );
}

```

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

### Custom Sheet Header Example

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Create a custom header for the sheet by providing children to Sheet.Header. Includes a Sheet.DragIndicator for drag functionality.

```tsx
function CustomHeaderExample() {
  return (
    <Sheet>
      <Sheet.Container>
        <Sheet.Header>
          <div style={{ padding: '16px', textAlign: 'center' }}>
            <h2>Custom Header</h2>
            <Sheet.DragIndicator />
          </div>
        </Sheet.Header>
        <Sheet.Content>
          <p>Sheet content goes here...</p>
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Ensure Content Reachability with Padding

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

This example demonstrates how to add bottom padding to sheet content based on its vertical position. This ensures that content is always reachable, especially when the sheet is not fully open. It uses the `y` motion value from the sheet's context.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useTransform } from 'motion/react';
import { useState, useRef } from 'react';

const snapPoints = [0, 0.5, 1];

function PaddingExample() {
  const [isOpen, setOpen] = useState(false);
  const sheetRef = useRef<SheetRef>(null);

  // Add padding bottom based on how far the sheet is from being fully open
  const paddingBottom = useTransform(() => {
    return sheetRef.current?.y.get() ?? 0;
  });

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

      <Sheet
        ref={sheetRef}
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        snapPoints={snapPoints}
        initialSnap={1}
      >
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content
            // 👇 Apply styles to the inner scroller element
            scrollStyle={{ paddingBottom }}
            // 💡 Recommendation: disable drag for the content so that it doesn't interfere with scrolling
            disableDrag
          >
            This content will always be reachable even when the sheet is not
            fully open.
          </Sheet.Content>
        </Sheet.Container>
      </Sheet>
    </>
  );
}

```

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

### Conditionally Disable Scroll with Snap Points

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Use the `disableScroll` prop with a function to control scrolling based on the current snap point. This example allows scrolling only at the top snap point.

```tsx
const snapPoints = [0, 0.5, 1];

function ConditionalScrollExample() {
  return (
    <Sheet snapPoints={snapPoints} initialSnap={1}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content
          // Only allow scrolling when at the top snap point (index 2)
          disableScroll={(state) => state.currentSnap !== 2}
        >
          <div style={{ height: '200vh' }}>Long content here...</div>
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Sheet with Smart Scroll and Drag Behavior

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Configures Sheet.Content to conditionally disable scrolling or dragging based on the sheet's state. This example allows scrolling only when fully expanded and dragging only when scrolled to the top.

```tsx
import { Sheet } from 'react-modal-sheet';

const snapPoints = [0, 170, 0.5, 1];

function SmartScrollSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  const lastSnapIndex = snapPoints.length - 1;

  return (
    <Sheet isOpen={isOpen} onClose={onClose} snapPoints={snapPoints} initialSnap={1}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content
          // Only allow scrolling when fully expanded
          disableScroll={(state) => state.currentSnap !== lastSnapIndex}
          // Allow dragging only when scrolled to top
          disableDrag={(state) => state.scrollPosition !== 'top'}
          // Add bottom padding equal to the current Y offset so all items are reachable
          scrollStyle={{ paddingBottom: 80 }}>
          {Array.from({ length: 30 }, (_, i) => (
            <div key={i} style={{ padding: '12px 16px', borderBottom: '1px solid #eee' }}>
              Item {i + 1}
            </div>
          ))}
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop onTap={onClose} />
    </Sheet>
  );
}
```

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

### Access Sheet Methods via Ref

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Use `useRef` to get a reference to the Sheet component. This allows imperative access to methods like `snapTo` or properties like `y`. Avoid reading the ref during render due to React's rules.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useRef } from 'react';

function RefExample() {
  const sheetRef = useRef<SheetRef>(null);

  // Then use eg. `sheetRef.current.snapTo()` or `sheetRef.current.y`, etc.

  return (
    <Sheet ref={sheetRef}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content>{/* Your content here */}</Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### onCloseStart

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Callback function invoked when the sheet's closing animation begins.

```APIDOC
## onCloseStart

### Description
Callback function that is called when the sheet closing animation starts.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### modalEffectThreshold

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

A threshold value (0-1) determining when the iOS modal effect activates during sheet dragging. 0 means the effect starts immediately, 1 means it starts when the sheet is fully visible.

```APIDOC
## modalEffectThreshold

### Description
Threshold value between 0-1 which determines when the iOS modal effect will start while dragging the sheet - `0` corresponding to the start of the drag (0% has been dragged into view) and `1` corresponding to the end of the drag (100% of the sheet is visible).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "modalEffectThreshold": 0
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Basic Usage of Sheet Component

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Demonstrates the basic usage of the Sheet component, including state management for open/close and its compound components like Container, Header, Content, and Backdrop.

```tsx
import { Sheet } from 'react-modal-sheet';
import { useState } from 'react';

function Example() {
  const [isOpen, setOpen] = useState(false);

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

      <Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>{/* Your sheet content goes here */}</Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>
    </>
  );
}
```

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

### Conditionally Disable Drag Based on Scroll Position

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Control when dragging is enabled using the `disableDrag` prop, which can be a function evaluating the scroll state. This example disables drag when the content is not scrolled to the top.

```tsx
function DynamicDragExample() {
  return (
    <Sheet>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content
          // Disable drag when not scrolled to top
          disableDrag={(state) => state.scrollPosition !== 'top'}
        >
          <div style={{ height: '200vh' }}>Long content here...</div>
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Basic Sheet Component Usage

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Demonstrates the basic usage of the Sheet component with various configuration options. Ensure Sheet.Container, Sheet.Header, and Sheet.Content are rendered within Sheet.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useState, useRef } from 'react';

const snapPoints = [0, 0.5, 1]; // 0 = closed, 0.5 = 50 %, 1 = fully open

function BasicSheet() {
  const [isOpen, setOpen] = useState(false);
  const sheetRef = useRef<SheetRef>(null);

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

      <Sheet
        ref={sheetRef}
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        // Snap points in ascending order; 0 closes the sheet
        snapPoints={snapPoints}
        initialSnap={1}            // open to 50 %
        detent="default"           // 'default' | 'content' | 'full'
        avoidKeyboard              // shift sheet up when keyboard opens (default true)
        disableDismiss={false}     // prevent drag-to-close
        disableDrag={false}        // lock all drag gestures
        disableScrollLocking={false}
        dragVelocityThreshold={1200}  // px/s needed to flick-close
        dragCloseThreshold={0.6}      // fraction of sheet that must be off-screen
        modalEffectRootId="root"   // enables iOS-style scale on app root
        tweenConfig={{ ease: 'easeOut', duration: 0.2 }}
        prefersReducedMotion={false}
        onOpenStart={() => console.log('opening…')}
        onOpenEnd={() => console.log('open')}
        onCloseStart={() => console.log('closing…')}
        onCloseEnd={() => console.log('closed')}
        onSnap={(index) => console.log('snapped to', index)}
      >
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>
            <p style={{ padding: 16 }}>Sheet content</p>
          </Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop onTap={() => setOpen(false)} />
      </Sheet>
    </>
  );
}

```

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

### Accessing Sheet Methods and Properties via Ref

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Demonstrates how to use `useRef` to gain imperative access to sheet methods and properties.

```APIDOC
## Accessing Sheet Methods and Properties via Ref

This example shows how to use `useRef` to gain imperative access to sheet methods and properties.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useRef } from 'react';

function RefExample() {
  const sheetRef = useRef<SheetRef>(null);

  // Then use eg. `sheetRef.current.snapTo()` or `sheetRef.current.y`, etc.

  return (
    <Sheet ref={sheetRef}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content>{/* Your content here */}</Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

> [!IMPORTANT]
> [React's rules about refs](https://react.dev/reference/react/useRef#caveats) apply here so don't read the sheet ref during render. If you need to access sheet methods or properties during render, use the `Sheet.useContext` hook instead.
```

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

### Enable Virtual Keyboard Avoidance

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Use the `avoidKeyboard` prop to enable built-in virtual keyboard avoidance. This is enabled by default and automatically adds bottom padding to prevent the keyboard from covering input elements.

```tsx
function KeyboardExample() {
  return (
    <Sheet avoidKeyboard>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content>
          <input placeholder="Your input here" />
          <textarea placeholder="Your message here" />
          {/* More form elements */}
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Content-Sized Sheet with Custom Styling

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Shows how to use Sheet.Container with custom styling via styled-components to create a content-sized sheet. The `detent="content"` prop is crucial for this behavior.

```tsx
import { Sheet } from 'react-modal-sheet';
import { styled } from 'styled-components';

// Custom styling via styled-components
const StyledContainer = styled(Sheet.Container)`
  padding-inline: 16px;
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
  border-radius: 16px 16px 0 0;
  background: #1a1a2e;
`;

function ContentSizedSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  return (
    <Sheet isOpen={isOpen} onClose={onClose} detent="content" unstyled>
      <StyledContainer>
        <Sheet.Header />
        <Sheet.Content>
          <div style={{ padding: 24, color: '#fff' }}>
            <h2>Dynamic height</h2>
            <p>The container sizes to this content.</p>
          </div>
        </Sheet.Content>
      </StyledContainer>
      <Sheet.Backdrop onTap={onClose} unstyled={false} />
    </Sheet>
  );
}

```

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

### Custom Sheet Header with Drag Handle

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Use Sheet.Header to render custom content in the draggable top area. Set disableDrag to false to enable pan gestures. This example replaces the default drag indicator with custom elements.

```tsx
import { Sheet } from 'react-modal-sheet';

function CustomHeaderSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  return (
    <Sheet isOpen={isOpen} onClose={onClose}>
      <Sheet.Container>
        <Sheet.Header disableDrag={false}>
          {/* Custom header — replaces default drag indicator */}
          <div style={{ display: 'flex', alignItems: 'center', padding: '12px 16px', gap: 8 }}>
            <Sheet.DragIndicator />
            <h3 style={{ margin: 0, flex: 1 }}>Title</h3>
            <button onClick={onClose} aria-label="Close">✕</button>
          </div>
        </Sheet.Header>
        <Sheet.Content>
          <p style={{ padding: 16 }}>Body</p>
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### Manage Virtual Keyboard Manually

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Disable default keyboard avoidance with `avoidKeyboard={false}` and use the `useVirtualKeyboard` hook to manage the `--keyboard-inset-height` CSS variable. Apply this variable as `paddingBottom` to the `Sheet.Content` to keep content above the keyboard.

```tsx
import { Sheet, useVirtualKeyboard } from 'react-modal-sheet';

function ManualKeyboardExample() {
  const [isOpen, setOpen] = useState(false);

  // This hook manages the `--keyboard-inset-height` CSS variable for you
  useVirtualKeyboard({ isEnabled: isOpen });

  return (
    // Disable default keyboard avoidance
    <Sheet avoidKeyboard={false} isOpen={isOpen} onClose={() => setOpen(false)}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content
          // Apply keyboard height as padding bottom to keep content above the keyboard
          style={{ paddingBottom: 'var(--keyboard-inset-height)' }}
        >
          {/* Your content here */}
        </Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </Sheet>
  );
}
```

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

### initialSnap

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Specifies the initial snap point index from `snapPoints` when the sheet is first opened.

```APIDOC
## initialSnap

### Description
Initial snap point when sheet is opened (index from `snapPoints`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "initialSnap": 0
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### prefersReducedMotion

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

When set to true, animations for the sheet are skipped, and it will instantly snap to the desired location.

```APIDOC
## prefersReducedMotion

### Description
Skip sheet animations (sheet instantly snaps to desired location).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "prefersReducedMotion": true
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### snapTo(index)

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Imperatively snap the modal sheet to a specific snap point defined by its index. This method is useful for controlling the sheet's position programmatically.

```APIDOC
## snapTo(index)

### Description
Imperative method for snapping to a snap point in given index.

### Method Signature
`snapTo(index: number): void`

### Parameters
#### Path Parameters
- **index** (number) - Required - The index of the snap point to snap to.
```

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

### mountPoint

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Specifies the HTML element where the sheet should be mounted. Defaults to `document.body`.

```APIDOC
## mountPoint

### Description
HTML element that should be used as the mount point for the sheet. Defaults to `document.body`.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "mountPoint": "document.body"
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Sheet Methods

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

These methods allow for imperative control over the sheet's state, such as snapping to specific points.

```APIDOC
## Sheet Methods

These methods allow for imperative control over the sheet's state, such as snapping to specific points.

### `snapTo(index)`
- **Type**: `(index: number) => void`
- **Description**: Imperatively snaps the sheet to a snap point index. Requires `snapPoints` prop. Index `0` closes the sheet.
```

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

### tweenConfig

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Allows overriding the default tween transition configuration for opening, closing, or snapping the sheet.

```APIDOC
## tweenConfig

### Description
Overrides the config for the sheet [tween](https://motion.dev/docs/react-transitions#tween) transition when the sheet is opened, closed, or snapped to a point.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "tweenConfig": {
    "ease": "easeOut",
    "duration": 0.2
  }
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Accessing Sheet Methods and Properties via Context

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Illustrates how to use the `Sheet.useContext` hook for accessing sheet methods and properties within the sheet's component tree.

```APIDOC
## Accessing Sheet Methods and Properties via Context

This example shows how to use the `Sheet.useContext` hook for accessing sheet methods and properties within the sheet's component tree.

```tsx
import { Sheet } from 'react-modal-sheet';

function ContextExample() {
  return (
    <Sheet>
      <SheetContainer />
      <Sheet.Backdrop />
    </Sheet>
  );
}

/**
 * NOTE: you need to define a separate component for using the `Sheet.useContext`
 * hook since it can only be used within the sheet component tree.
 */
function SheetContainer() {
  const context = Sheet.useContext();

  // Then use eg. `context.snapTo()` or `context.y`, etc.

  return (
    <Sheet.Container>
      <Sheet.Header />
      <Sheet.Content>{/* Your content here */}</Sheet.Content>
    </Sheet.Container>
  );
}
```

> [!TIP]
> You generally want to prefer the `Sheet.useContext` hook when possible since it doesn't require you to manage refs and works seamlessly with React's declarative nature. However, there are some cases where using a ref might be more convenient, eg. when you need to access sheet methods from outside the sheet component tree.
>
> If you want to avoid creating a separate component just for using the `Sheet.useContext` hook, you can also create a reusable component that uses render-props pattern to expose the sheet context:
>
> ```tsx
> import { ReactNode } from 'react';
> import { Sheet, type SheetContext } from 'react-modal-sheet';
>
> // Generic render-prop helper component
> function WithSheetContext({
>   children,
> }: {
>   children: (context: SheetContext) => ReactNode;
> }) {
>   // ... implementation using Sheet.useContext ...
> }
> ```
```

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

### onSnap

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Callback function triggered with the current snap point index when the sheet settles into a new position. Requires the `snapPoints` prop.

```APIDOC
## onSnap

### Description
Callback function that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Detect Virtual Keyboard with useVirtualKeyboard

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Use this hook to detect virtual keyboard visibility and manage CSS variables for layout adjustments. It integrates with both the Virtual Keyboard API and Visual Viewport API. Configure `isEnabled`, `debounceDelay`, and `visualViewportThreshold` for optimal performance.

```tsx
import { Sheet, useVirtualKeyboard } from 'react-modal-sheet';
import { useState } from 'react';

function ManualKeyboardSheet() {
  const [isOpen, setOpen] = useState(false);

  // Sets --keyboard-inset-height on :root; also returns state if needed
  const { isKeyboardOpen, keyboardHeight } = useVirtualKeyboard({
    isEnabled: isOpen,       // only active while sheet is open
    debounceDelay: 100,      // ms to debounce viewport resize events
    visualViewportThreshold: 100, // min px diff to consider keyboard visible
  });

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

      {/* Disable built-in avoidance so we manage it ourselves */}
      <Sheet isOpen={isOpen} onClose={() => setOpen(false)} avoidKeyboard={false}>
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content
            style={{
              // Use the CSS variable updated by the hook
              paddingBottom: 'var(--keyboard-inset-height, 0px)',
            }}
          >
            <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <p>Keyboard open: {isKeyboardOpen ? 'yes' : 'no'} ({keyboardHeight}px)</p>
              <input placeholder="First name" style={{ padding: 12, fontSize: 16 }} />
              <input placeholder="Last name" style={{ padding: 12, fontSize: 16 }} />
              <input placeholder="Email" type="email" style={{ padding: 12, fontSize: 16 }} />
            </div>
          </Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>
    </>
  );
}
```

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

### Integrate with Design Systems using `unstyled` Mode

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Set `unstyled` to `true` on the root `Sheet` to remove all default decorative styles, allowing full control via styled-components or other styling solutions. Individual components can opt back into default styles by setting `unstyled={false}`.

```tsx
import { Sheet } from 'react-modal-sheet';
import { styled } from 'styled-components';

const StyledContainer = styled(Sheet.Container)`
  padding: 16px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to bottom, #667eea, #764ba2);
`;

const StyledContent = styled(Sheet.Content)`
  color: white;
  padding: 0 16px 16px;
`;

function FullyCustomSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  return (
    // unstyled=true removes ALL decorative styles from every child
    <Sheet isOpen={isOpen} onClose={onClose} detent="content" unstyled>
      <StyledContainer>
        <Sheet.Header>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0' }}>
            {/* Re-enable default drag indicator styles with unstyled={false} */}
            <Sheet.DragIndicator unstyled={false} />
          </div>
        </Sheet.Header>
        <StyledContent>
          <h2>Custom sheet</h2>
          <p>Completely controlled styling with unstyled mode.</p>
          <button onClick={onClose} style={{ marginTop: 8 }}>Dismiss</button>
        </StyledContent>
      </StyledContainer>
      {/* Keep default backdrop style */}
      <Sheet.Backdrop onTap={onClose} unstyled={false} />
    </Sheet>
  );
}

```

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

### Create Custom Hook for Snap Point Animations

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

This custom hook interpolates output values based on sheet snap points. It's useful for animating properties like border-radius or opacity in sync with the sheet's position. Ensure the output array length matches the snap points array length.

```tsx
import { interpolate, useTransform } from 'motion/react';
import { Sheet } from 'react-modal-sheet';

export function useSnapPointTransform( 
  /** The output values corresponding to the snap points. Must have the same length as snap points array */
  output: number[],
  /** The default value to return during the first render when snap points are not yet calculated */
  defaultValue?: number
) {
  const { snapPoints, y } = Sheet.useContext();

  return useTransform(y, (val) => {
    const firstValue = output[0];

    if (firstValue === undefined) {
      throw new Error('Output array must have at least one value');
    }

    if (snapPoints.length === 0) {
      return defaultValue ?? firstValue;
    }

    if (output.length !== snapPoints.length) {
      throw new Error('Output array must have the same length as snap points');
    }

    const mix = interpolate(
      snapPoints.map((point) => point.snapValueY),
      output
    );

    return mix(val);
  });
}

function SnapPointAnimationExample() {
  return (
    // Provide snap points that `useSnapPointTransform` can use for interpolation
    <Sheet snapPoints={[0, 0.5, 0.7, 1]}>
      <SheetContainer>
        <Sheet.Header />
        <Sheet.Content> {/* Some content here */}</Sheet.Content>
      </SheetContainer>
      <SheetBackdrop />
    </Sheet>
  );
}

function SheetContainer({ children }: { children: ReactNode }) {
  /**
   * Example: Animate border radius based on snap points:
   * - snap point 0 - 1: border radius 32px
   * - snap point 1 - 2: border radius 32px to 8px
   * - snap point 2 - 3: border radius 8px to 0px
   * - snap point 3: border radius 0px
   */
  const borderRadius = useSnapPointTransform([32, 32, 8, 0]);

  return (
    <Sheet.Container
      style={{
        borderTopRightRadius: borderRadius,
        borderTopLeftRadius: borderRadius,
      }}
    >
      {children}
    </Sheet.Container>
  );
}

function SheetBackdrop() {
  // Fade in the backdrop between last two snap points
  const opacity = useSnapPointTransform([0, 0, 0, 1]);

  const backgroundColor = useMotionTemplate`
    background-color: rgba(0, 0, 0, ${opacity});
  `;

  return <Sheet.Backdrop style={{ backgroundColor }} />;
}

```

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

### snapPoints

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Defines the possible positions the sheet can snap to. Positive values are pixels from the bottom, negative from the top. Values between 0-1 are percentages of the sheet height. Must be in ascending order and include 0 (closed) and 1 (fully open).

```APIDOC
## snapPoints

### Description
Defines the possible positions the sheet can snap to. Positive values are pixels from the bottom, negative from the top. Values between 0-1 are percentages of the sheet height. Must be in ascending order and include 0 (closed) and 1 (fully open).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "snapPoints": [
    0,
    0.5,
    100,
    1
  ]
}
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Sheet with Animated Backdrop and Tap-to-Close

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Utilizes Sheet.Backdrop with an onTap handler for tap-to-close functionality. Custom styles like backdropFilter and background color can be applied. The backdrop's opacity is automatically driven by the sheet's yProgress.

```tsx
import { Sheet } from 'react-modal-sheet';
import { useMotionTemplate, useTransform } from 'motion/react';

function AnimatedBackdropSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  return (
    <Sheet isOpen={isOpen} onClose={onClose}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content><p style={{ padding: 16 }}>Content</p></Sheet.Content>
      </Sheet.Container>

      {/* Tap backdrop to close; Motion's onTap is used (not onClick) */}
      <Sheet.Backdrop
        onTap={onClose}
        style={{ backdropFilter: 'blur(4px)', backgroundColor: 'rgba(0,0,0,0.4)' }}
      />
    </Sheet>
  );
}
```

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

### Sheet.useContext

Source: https://context7.com/temzasse/react-modal-sheet/llms.txt

Hook for child components to access SheetContext without needing a ref. It exposes motion values, height, current snap, snap points, and snapTo functionality.

```APIDOC
## `Sheet.useContext` — Hook for child components

`Sheet.useContext()` returns the `SheetContext` (`ExposedContextType`) from any component rendered inside the sheet tree without needing a ref. It exposes the same values as `SheetRef`: `y`, `yInverted`, `yProgress` motion values, `height`, `currentSnap`, `snapPoints`, and `snapTo`.

### Usage Example

```tsx
import { Sheet, type SheetContext } from 'react-modal-sheet';
import { useTransform, interpolate } from 'motion/react';

// Helper that exposes context via render-prop pattern
function WithSheetContext({ children }: { children: (ctx: SheetContext) => React.ReactNode }) {
  const ctx = Sheet.useContext();
  return <>{children(ctx)}</>;
}

function ContextDrivenSheet({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  return (
    <Sheet isOpen={isOpen} onClose={onClose} snapPoints={[0, 0.3, 0.7, 1]} initialSnap={1}>
      <Sheet.Container>
        <Sheet.Header />
        <WithSheetContext>
          {(ctx) => {
            // Fade a header in as the sheet opens past 70 %
            const opacity = useTransform(ctx.yProgress, [0, 0.7, 1], [0, 0, 1]);
            return (
              <Sheet.Content>
                <div style={{ padding: 16 }}>
                  <p>y: <span>{ctx.y.get().toFixed(0)}px</span></p>
                  <p>snap: {ctx.currentSnap}</p>
                  <button onClick={() => ctx.snapTo(3)}>Snap to top</button>
                  <button onClick={() => ctx.snapTo(0)}>Close</button>
                </div>
              </Sheet.Content>
            );
          }}
        </WithSheetContext>
      </Sheet.Container>
      <Sheet.Backdrop onTap={onClose} />
    </Sheet>
  );
}
```
```

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

### Use Sheet Context in React

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Demonstrates how to access and use the Sheet context within a React component to control sheet behavior, such as snapping.

```jsx
const context = Sheet.useContext();
return <>{children(context)}</>;
}
```

```jsx
// Usage
function ContextExample() {
  return (
    <Sheet snapPoints={[0, 0.5, 1]} initialSnap={1}>
      <WithSheetContext>
        {(context) => (
          <Sheet.Container>
            <Sheet.Header />
            <Sheet.Content>
              <button onClick={() => context.snapTo(2)}>
                Snap to index 2
              </button>
            </Sheet.Content>
          </Sheet.Container>
        )}
      </WithSheetContext>
    </Sheet>
  );
}
```

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

### Sheet Detent Configuration

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Configure the sheet's height behavior using the 'detent' prop. 'content' makes the sheet height based on its content.

```tsx
function DetentExample() {
  return (
    <Sheet detent="content">
      <Sheet.Container>
        <Sheet.Content>
          <div style={{ height: 200 }}>Some content</div>
        </Sheet.Content>
      </Sheet.Container>
    </Sheet>
  );
}
```

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

### Apply CSS Modules to Sheet Components

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Use CSS Modules to scope styles to specific components. Import the styles object and apply class names to the Sheet components.

```tsx
import styles from './styles.css';

function Example() {
  return (
    <Sheet>
      <Sheet.Container className={styles.sheetContainer}>
        <Sheet.Header className={styles.sheetHeader} />
        <Sheet.Content className={styles.sheetContent}>{/*...*/}</Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop className={styles.sheetBackdrop} />
    </Sheet>
  );
}
```

```css
/* styles.css */

.sheetContainer {
  /* custom styles */
}
.sheetHeader {
  /* custom styles */
}
.sheetContent {
  /* custom styles */
}
.sheetBackdrop {
  /* custom styles */
}
```

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

### Reusable Sheet Context with Render-Props

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

A generic render-prop component to expose sheet context to any child, avoiding the need for a separate component solely for context consumption.

```tsx
import { ReactNode } from 'react';
import { Sheet, type SheetContext } from 'react-modal-sheet';

// Generic render-prop helper component
function WithSheetContext({
  children,
}: {
  children: (context: SheetContext) => ReactNode;
}) {
```

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

### Using Internal Motion Values for Animations

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Shows how to utilize internal motion values like `y`, `yInverted`, and `yProgress` from the sheet's context to create custom animations. The `yProgress` value is normalized between 0 and 1, useful for effects like fading elements based on the sheet's open state.

```tsx
import { Sheet, type SheetRef } from 'react-modal-sheet';
import { useTransform, interpolate } from 'motion/react';
import { useRef } from 'react';

function RefExample() {
  const sheetRef = useRef<SheetRef>(null);

  /**
   * Example 1: Fade out an element as the sheet gets close to being fully open:
   * - y: 0% - 50% → opacity 1
   * - y: 50% - 60% → opacity fades from 1 to 0
   * - y: 60% - 100% → opacity stays at 0
   */
  const opacity = useTransform(() => {
    const progress = sheetRef?.yProgress.get() ?? 0;
    const mix = interpolate([0, 0.5, 0.6], [1, 1, 0]);
    return mix(progress);
  });

  return <Sheet ref={sheetRef}>{/* ... * /}</Sheet>;
}
```

```tsx
function ContextExample() {
  return (
    <Sheet>
      <InnerComponent />
    </Sheet>
  );
}

function InnerComponent() {
  const context = Sheet.useContext();

  /**
   * Example 2: Add padding to some content based on how far the sheet is dragged:
   * - y: 0px - 100px → padding 16px to 8px
   * - y: 100px - 200px → padding 8px to 0px
   * - y: > 200px → padding 0px
   */
  const padding = useTransform(context.yInverted, (value) => {
    const mix = interpolate([0, 100, 200], [16, 8, 0]);
    return mix(value);
  });
}
```

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

### Enable iOS Modal Effect with Root ID

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Provide the id of the root element where your application is mounted to enable the iOS modal view effect. Ensure the root element is scrollable to avoid limitations.

```tsx
function Example() {
  return <Sheet modalEffectRootId="root">{/*...*/}</Sheet>;
}
```

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

### Override Sheet Styles with Vanilla CSS

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Target the default class names provided by the library to override styles using plain CSS. Ensure your CSS specificity is sufficient.

```css
.react-modal-sheet-backdrop {
  /* custom styles */
}
.react-modal-sheet-container {
  /* custom styles */
}
.react-modal-sheet-header {
  /* custom styles */
}
.react-modal-sheet-header-container {
  /* custom styles */
}
.react-modal-sheet-drag-indicator-container {
  /* custom styles */
}
.react-modal-sheet-drag-indicator {
  /* custom styles */
}
.react-modal-sheet-content {
  /* custom styles */
}
```

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

### Apply CSS-in-JS to Sheet Components

Source: https://github.com/temzasse/react-modal-sheet/blob/main/README.md

Utilize CSS-in-JS libraries like styled-components to create styled versions of the Sheet components. This allows for dynamic styling and component composition.

```tsx
import { styled } from 'styled-components'; // or emotion, pandacss, etc.

function Example() {
  return (
    <Sheet>
      <SheetContainer>
        <SheetHeader />
        <SheetContent>{/*...*/}</SheetContent>
      </SheetContainer>
      <SheetBackdrop />
    </Sheet>
  );
}

const SheetContainer = styled(Sheet.Container)`
  /* custom styles */
`;

const SheetHeader = styled(Sheet.Header)`
  /* custom styles */
`;

const SheetContent = styled(Sheet.Content)`
  /* custom styles */
`;

const SheetBackdrop = styled(Sheet.Backdrop)`
  /* custom styles */
`;
```