SNAP event should support snapPoint(s)

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]

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);
      }}
    />
  );
}

[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.