Replacing onViewportBoxUpdate functionality in v10

[hexcowboy]

I have a component that works in framer motion up to v4. In v5, the onViewportBoxUpdate prop was removed.

function Item({ i, updatePosition, updateOrder, item }: Item) {
  const [isDragging, setDragging] = useState(false);
  const ref = useMeasurePosition((pos) => updatePosition(i, pos));

  return (
    <motion.div
      ref={ref}
      layout
      initial={false}
      drag
      onDragStart={() => setDragging(true)}
      onDragEnd={() => setDragging(false)}
      onViewportBoxUpdate={(_: AxisBox2D, delta: BoxDelta) => {
        if (isDragging) {
          updateOrder(i, delta.x.translate, delta.y.translate);
        }
      }}
    >
      <p>{item.id}</p>
    </motion.div>
  );
}

I believe its possible to refactor this without using onViewportBoxUpdate, but it depends on getting the BoxDelta's x.translate and y.translate. I'm not entirely sure how to get the BoxDelta in v10.

Does anyone have any guidance or direction on how to migrate this component to v10?

Codesandbox

[kschmott]

Did you figure this out? Facing the same issue.

[hexcowboy]

I have not. Still using v4