diff --git a/README.md b/README.md index e89992a6..d52e799c 100644 --- a/README.md +++ b/README.md @@ -227,6 +227,19 @@ Type: `boolean` Disabled by default. By default, a user can expand the bottom sheet only by dragging a header or the overlay. This option enables expanding the bottom sheet on the content dragging. +### springConfig + +Type: `{ mass: number; tension: number; friction: number }` + +Helps you to customize the movement and speed of the animations. + +```jsx + +``` + ## Events All events receive `SpringEvent` as their argument. The payload varies, but `type` is always present, which can be `'OPEN' | 'RESIZE' | 'SNAP' | 'CLOSE'` depending on the scenario. diff --git a/src/BottomSheet.tsx b/src/BottomSheet.tsx index 83234c94..6b673c48 100644 --- a/src/BottomSheet.tsx +++ b/src/BottomSheet.tsx @@ -64,6 +64,7 @@ export const BottomSheet = React.forwardRef< blocking = true, scrollLocking = true, style, + springConfig, onSpringStart, onSpringCancel, onSpringEnd, @@ -173,6 +174,7 @@ export const BottomSheet = React.forwardRef< friction, friction + (friction - friction * velocity) ), + ...springConfig, }, onRest: (...args) => { resolve(...args) diff --git a/src/types.ts b/src/types.ts index a572656b..9c59c16f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -42,6 +42,16 @@ export type SpringEvent = | { type: 'RESIZE'; source: ResizeSource } | { type: 'SNAP'; source: 'dragging' | 'custom' | string } +/** + * Properties that can be used to customize the animation. + * see https://react-spring.dev/docs/advanced/config#config-visualizer + */ +export type SpringConfig = { + mass: number + tension: number + friction: number +} + export type Props = { /** * Ensure that whatever you put in here have at least 1px height, or else the bottom sheet won't open @@ -55,6 +65,11 @@ export type Props = { */ sibling?: React.ReactNode + /** + * Pass the spring configurations (to change animation) in this format: { mass, tension, friction }. + */ + springConfig?: SpringConfig + /** * Start a transition from closed to open, open to closed, or snap to snap. * Return a promise or async to delay the start of the transition, just remember it can be cancelled.