Min and Max

Instead of setting dragConstraints, you can add min and max values to dragTransition. This has the same effect.

So instead of writing this:

export function DragConstraints(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragConstraints={{
                    top: -250,
                    right: 250,
                    bottom: 250,
                    left: -250,
                }}
            />
        )
    }
}

… you can also write this:

export function MinAndMax(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragTransition={{ min: -250, max: 250 }}
            />
        )
    }
}

But you see the limitation: The min value stands for both left and top. And the same is true for max: it defines the constraints for both the right and bottom. So you can only use them when the draggable element is allowed to move an equal distance in those directions.

min, max