<a href="https://www.npmjs.com/package/react-drag-sizing"><img height="20" src="https://img.shields.io/npm/dm/react-drag-sizing.svg"></a>
npm install 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();
}
}; 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(
Left bar
border="left"
style={{ minWidth: '15%', maxWidth: '85%', width: '50%' }}
handlerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}
>
Main content
,
mountNode
);
`for react < 16.8 we need hooks polyfill workaround
`tsx
// todo
``---
This project was bootstrapped with create-react-library & react-ts-demo.