# 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'

``` #### Props ```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(); } }; ; ``` **for umd / \ ``` ```js // myapp.js let React = window.React; let ReactDOM = window.ReactDOM; let { DragSizing } = window.ReactDragSizing; ReactDOM.render(

Left bar

Main content

, mountNode ); ``` **for react < 16.8 we need hooks polyfill workaround** ```tsx // todo ``` --- This project was bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library) & [react-ts-demo](https://github.com/fritx/react-ts-demo).

react-drag-sizing

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past