Pass "bounds" property in to draggableOpts?

[Natty Rindlaub]

Thanks for opening an issue!

Please select the type of issue you're reporting. For questions.

• Bug
• Feature Request
• Question

Hey there - I have a <ResizableBox /> wrapped in a <Draggable /> component, and I've implemented omni-directional resizing based on @conor-kelleher 's suggestion here. It works pretty well, and when dragging the box, it respects the bounds prop I passed to <Draggable />. However, when I resize the box it does not respect those bounds.

I tried passing the bounds prop into <ResizableBox />'s draggableOpts property, but that seemed to have no effect. Is that prop not supported? Other options I passed in (e.g. grid) worked fine.

[Juwon Seo]

Me problem too.
But I found the reason, there is no 'bounds' prop definition in DraggableCore's type.

In below link,
https://github.com/STRML/react-resizable/blob/master/lib/propTypes.js

draggableOpts: PropTypes.shape({
allowAnyClick: PropTypes.bool,
cancel: PropTypes.string,
children: PropTypes.node,
disabled: PropTypes.bool,
enableUserSelectHack: PropTypes.bool,
offsetParent: PropTypes.node,
grid: PropTypes.arrayOf(PropTypes.number),
handle: PropTypes.string,
nodeRef: PropTypes.object,
onStart: PropTypes.func,
onDrag: PropTypes.func,
onStop: PropTypes.func,
onMouseDown: PropTypes.func,
scale: PropTypes.number,
}), ...

There is no 'bounds' prop!

[Samuel Reed]

Yes, bounds is on <Draggable> not <DraggableCore>. The core library does not have internal state and has a minimal set of features so it can be built upon.

If you want to handle bounds, try using the minConstraints/maxConstraints props.