react-drag-sizing

- [x] "Drag to resize" (sizing) as React Component
- [x] Rewritten with TS & React-hooks
- [ ] Polyfill workaround with React < 16.8
- [x] Support both mouse & touch
- [x] Rollup bundle for both esm & umd
- [x] Default handlerWidth=16, handlerOffset=-w/2, handlerZIndex=10
- [x] Legacy branch: https://github.com/fritx/react-drag-sizing/tree/legacy
- [x] Live Demo: https://fritx.github.io/react-drag-sizing

``sh
npm i -S react-drag-sizing
`

`tsx
import DragSizing from 'react-drag-sizing'

`tsx
export type MEvent = MouseEvent | TouchEvent;
export type RdsMEvent =
| MouseEvent
| (TouchEvent & {
clientX: number;
clientY: number;
});

export interface DragSizingProps {
border: 'top' | 'bottom' | 'left' | 'right';
onStart?: (e: RdsMEvent) => void;
onEnd?: (e: RdsMEvent) => void;
onUpdate?: (e: RdsMEvent) => void;
id?: string;
className?: string;
style?: React.CSSProperties;
handlerClassName?: string;
handlerStyle?: React.CSSProperties;
handlerWidth?: number;
handlerOffset?: number;
handlerZIndex?: number;
}
`

hooking event listeners

`tsx
handleEditorSizingStart = () => {
// const nearBottom = scrollTop > ...
setShouldStickToBottom(nearBottom);
};
handleEditorSizingEnd = () => {
if (shouldStickToBottom) {
scrollToBottom();
}
};

border="top"
onStart={handleEditorSizingStart}
onEnd={handleEditorSizingEnd}
>

;
`

for umd / \



`

`js
// myapp.js
let React = window.React;
let ReactDOM = window.ReactDOM;
let { DragSizing } = window.ReactDragSizing;

ReactDOM.render(