Request: allow users to pass in onDragEnd, onDragStart, onDrag callbacks

[krissalvador27]

Use case: After drag I would like my component to internally update its state and track that the Sheet is opened at 600.

Interface could be something like ...

const Component = () => {
  // closed initially
  const [sheetPosition, setSheetPosition] = useState(0);

  return (
    <Sheet
      snapPoints={[600, 400, 100])
      onDragEnd={({snapPoint}) => {
        setSheetPosition(snapPoint);
      }}
    > 
      ... 
    </Sheet>
  );
}

On https://github.com/Temzasse/react-modal-sheet/blob/master/src/sheet.tsx#L82 we can add a

if (props.onDragEnd) {
  props.onDragEnd({snapPoint})
}

What do you think? Happy to contribute if you think this makes sense or if there's potentially a way for me to know the snappoint without passing in a callback!

[Temzasse]

Thank you for this idea! 🙏

I will think about this a bit and come back to you with a more detailed answer.

[Temzasse]

@krissalvador27 Sorry for not coming back to you sooner with an answer.

Do you think that onSnap prop could work?

onSnap: (snapPoint: number) => void

The snapPoint would be a snap point value from the given snapPoints array.

This onSnap would be called when the sheet opens, closes, manually snaps via ref, or after dragging has ended.

I already have a working solution and I think I could just release it on npm for people to try out since it doesn't change or break any existing functionality.

[Temzasse]

Released the mentioned onSnap prop in v1.2.0 which should solve this issue.