feat: add springConfig prop to customize animation

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
+<BottomSheet
+  // Animation faster than the default
+  springConfig={{mass: 0.1, tension: 370, friction: 26}}
+/>
+```
+
 ## 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.

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)

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.