Can this show handles on left side of box and have it resize to the left?

[ElixirMike]

Can it be configured to resize a div to the left?

[ConorKelleher]

Came across this recently on my own project. Since this library works from a top-left positioning, to be able to resize on the left or the top, with the right and bottom edges remaining in place, you need to be able to reposition the container, as well as resize it.

So the best this library could do is to receive an onDrag function or something similar to what react-draggable takes and do a little multiple-callback magic. You can easily implement this yourself in your onResize callback like so:

function onResize(event, { size, handle }) {
    setSize(size)

    // Check is handle on top or left of object
    if (['n', 'w', 'ne', 'nw', 'sw'].includes(handle) {
      // Left or top handles need repositioning when dragging. Only bottom right can be left alone
      let newLeft = myObject.left
      let newTop = myObject.top
      if (handle.indexOf('n') > -1) {
        const deltaHeight - size.height - myObject.height
        newTop -= deltaHeight
      }
      if (handle.indexOf('w') > -1) {
        const deltaWidth = size.width - myObject.width
        newLeft -= deltaWidth
      }
      onDrag({ left: newLeft, top: newTop })
    }
  }

[ElixirMike]

Thanks for this...I will check it out. Do you know if this can be defined with absolute positioning? In my case, I want to show a div that sits on the right side of page and can be dragged to the left to expand, and it should be on top of div below. Can I add style attribute to this and make it absolute?

[ConorKelleher]

Yeah if you're using absolute positioning it's even easier. Don't need to mess around with storing left-positioning, you can just set your drawer component to be absolutely positioned with right: 0 and then resizing in any direction will cause it to grow out to the left. I've put together a basic example showing how this can be done here: https://codesandbox.io/s/react-playground-vwlpk?file=/index.js

Note, there's some unpleasant stuttering when dragging to the left due to the library not taking the object's position changing into account. I've opened a PR to fix this https://github.com/STRML/react-resizable/pull/136

[ElixirMike]

Thx for the code snippet! I see that when I resisze, it pulls both sides in.; In my case, I want the right side to stick to the right side of browser...so all you can do is drag left to expand/or back. Like pulling out a drawer from the right side. Is that possible?

[ConorKelleher]

I just had one on each side to show the flicking issue I mentioned. The two green bars are each drawers stuck to the side of the browser. Here's a simplified one https://codesandbox.io/s/react-playground-io7rb?file=/index.js

Again, clearly there's some bad stuttering when dragging from the left, but if my PR linked above gets merged, that should be fixed

[iamjoross]

@conor-kelleher Waiting for your #136 to get merged