Pass "bounds" property in to draggableOpts?

[nathanielrindlaub]

Thanks for opening an issue!

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

• [ ] Bug
• [ ] Feature Request
• [x] 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.

[BearHunter49]

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!

[STRML]

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.