Recommended way to have drawer resizable?

Question

I would like to have the material ui drawer\'s width resizable through a draggable handle. My current approach is to have a mousevent listener on the whole app which checks

Answer 1

I would like to add an answer that is more up to date using React Hooks.

You can do it like this, then:

CSS:

sidebar-dragger: {
  width: '5px',
  cursor: 'ew-resize',
  padding: '4px 0 0',
  borderTop: '1px solid #ffffd',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  zIndex: '100',
  backgroundColor: '#f4f7f9'
}

React (using hooks with refs and states)

let isResizing = null;

function ResizeableSidebar (props) {
  const sidebarPanel = React.useRef('sidebarPanel');
  const cbHandleMouseMove = React.useCallback(handleMousemove, []);
  const cbHandleMouseUp = React.useCallback(handleMouseup, []);

  function handleMousedown (e) {
    e.stopPropagation();
    e.preventDefault();
    // we will only add listeners when needed, and remove them afterward
    document.addEventListener('mousemove', cbHandleMouseMove);
    document.addEventListener('mouseup', cbHandleMouseUp);
    isResizing = true;
  };

  function handleMousemove (e) {
    if (!isResizing) {
      return;
    }

    let offsetRight =
      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
    let minWidth = 50;
    if (offsetRight > minWidth) {
      let curSize = offsetRight - 60;
      // using a ref instead of state will be way faster
      sidebarPanel.current.style.width = curSize + 'px';
    }
  };

  function handleMouseup (e) {
    if (!isResizing) {
      return;
    }
    isResizing = false;
    document.removeEventListener('mousemove', cbHandleMouseMove);
    document.removeEventListener('mouseup', cbHandleMouseUp);
  };

  return 

    

    

      Your stuff goes here
    
  
;
}