From 6cbe67998d614de45580c0b819b166aa5eacc6df Mon Sep 17 00:00:00 2001
From: felipeix <felipeix.js@gmail.com>
Date: Tue, 28 Feb 2023 23:00:37 -0300
Subject: [PATCH] feat: add springConfig prop to customize animation
---
README.md | 13 +++++++++++++
src/BottomSheet.tsx | 2 ++
src/types.ts | 15 +++++++++++++++
3 files changed, 30 insertions(+)
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
+<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.
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.