migration / react-spring-bottom-sheet

Migrate from react-spring-bottom-sheet

This is an independently maintained continuation for React 19. Move deliberately from react-spring-bottom-sheet to @nipe-solutions/react-spring-bottom-sheet with a documented API and styling path.

npm install @nipe-solutions/react-spring-bottom-sheet

Choose your path

Evaluate version 5

Choose the React 19 package when its explicit controlled state, composable parts, and styling contracts fit your next release.

Stay with the original for now

Keep the original package until a migration is practical. The complete guide records the mapping so you can plan the change without treating it as a drop-in upgrade.

Controlled state before and after

The migration changes a monolithic component into explicit composition while keeping application state under your control.

Original package

Before.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

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

  return (
    <BottomSheet open={open} onDismiss={() => setOpen(false)}>
      <h2>Details</h2>
    </BottomSheet>
  )
}

React 19 continuation

After.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import { useState } from 'react'
import { Sheet } from '@nipe-solutions/react-spring-bottom-sheet'

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

  return (
    <Sheet.Root open={open} onOpenChange={setOpen}>
      <Sheet.Portal>
        <Sheet.Backdrop />
        <Sheet.Viewport>
          <Sheet.Content>
            <Sheet.Title>Details</Sheet.Title>
            <Sheet.Close>Close</Sheet.Close>
          </Sheet.Content>
        </Sheet.Viewport>
      </Sheet.Portal>
    </Sheet.Root>
  )
}

API and styling mapping

Version 4 to version 5 migration mapping
Original API	Version 5 path
`open`	Keep `open` on `Sheet.Root` or `BottomSheet`.
`blocking`	Replace with `modal`.
`onDismiss`	Use `onOpenChange` and update controlled state when it receives `false`.
`snapPoints`	Provide named `{ id, value }` snap points.
`defaultSnap`	Use `defaultSnapPoint` with a snap-point id.
`header`	Compose header content before the scroll region inside `Sheet.Content`.
`footer`	Compose footer content after the scroll region inside `Sheet.Content`.
`BottomSheetRef`	Remove it; control active snap state with props and callbacks.
`expandOnContentDrag`	Remove it; gesture ownership now follows scroll boundaries.
`stylesheet imports`	Replace `/style.css` or `/dist/style.css` with `/styles.css`; use `/core.css` for a full restyle.

See the complete migration guide for callback, CSS selector, and import detail.

Requirements

Version 5 requires React 19 and is verified in current Chromium, Firefox, and WebKit browsers.