SNAP event should support snapPoint(s)

[elitenoire]

Like the issue #53 , Is there a way to know the snapPoint that triggers the SNAP event?

I want to perform an action whenever the snapPoint changes.
I thought of triggering the action after ref.current.snapTo() but I realized dragging also fires the SNAP event.

Thanks for the library!

[stipsan]

Hi! There isn't a way to do that atm but I'll add it 😄

Stay tuned 👍

[github-actions]

🎉 This issue has been resolved in version 3.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[elitenoire]

Thanks for looking into this but your release solves a different issue.

MY USE CASE:
I'm using two snapPoints to fake open and close the bottomsheet.
When SNAP event is detected, depending on what snapPoint the bottomsheet snaps to (doesn't matter the source),
I want to change my app state accordingly (min snapPoint - closed, max snapPoint - open).

Hence, I will like the snapPoint to be exposed or be a payload of the SNAP event.

Thanks again.

[stipsan]

Hey, you can access the current snap point on ref.current.height :)

[elitenoire]

Oh I didn't see that, thanks.
Okay what about accessing the defined snapPoints?
Supposing my snapPoints are derived from the maxHeight and headerHeight ,
And I need to compare them in the SNAP event to the current snapPoint.

If I store the defined snapPoints in state, I'll have to always update it whenever the sheet resizes I guess.

Maybe you could also expose the other params minHeight, maxHeight, footerHeight the same way as the height?
Or even the snapPoints in a getter function.

[stipsan]

You're welcome 🙂

I'll think about it, I don't want to increase the complexity too much yet as I got some other ideas I want to explore first.

For now you could store a reference to the snap points yourself, and keep track of any other variable you need:

export default function Example() {
  const snapPointsRef = React.useRef([]);
  return (
    <BottomSheet
      snapPoints={({ minHeight, maxHeight }) => {
        const snapPoints = [minHeight, maxHeight];
        snapPointsRef.current = snapPoints;
        return snapPoints;
      }}
    />
  );
}

The snapPoints function is always called whenever any of its arguments changes. The only thing to remember is that the real snap points are filtered and do not contain illegal variables. In most cases this isn't a problem, but should it turn out to be you could use the defaultSnap function to access snapPoints:

export default function Example() {
  const snapPointsRef = React.useRef([]);
  return (
    <BottomSheet
      defaultSnap={({ lastSnap, snapPoints }) => {
        snapPointsRef.current = snapPoints;
        return lastSnap || Math.max(...snapPoints);
      }}
    />
  );
}