"Drag to resize" (sizing) as React Component.

Overview

react-drag-sizing

npm i -S react-drag-sizing
import DragSizing from 'react-drag-sizing'

<div className="chat-top"></div>
<div className="chat-body">
  <div className="chat-left">
    <MessageList />
    <DragSizing border="top">
      <Editor />
    </DragSizing>
  </div>
  <div className="chat-right">
    <DragSizing border="left">
      <MemberList />
    </DragSizing>
  </div>
</div>

Props

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

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

<DragSizing
  border="top"
  onStart={handleEditorSizingStart}
  onEnd={handleEditorSizingEnd}
>
  <Editor />
</DragSizing>;

for umd / <script> usage

<script src="https://unpkg.com/react"></script>
<script src="https://unpkg.com/react-dom"></script>
<script src="https://unpkg.com/react-drag-sizing"></script>
<script src="myapp.js"></script>
// myapp.js
let React = window.React;
let ReactDOM = window.ReactDOM;
let { DragSizing } = window.ReactDragSizing;

ReactDOM.render(
  <div style={{ display: 'flex' }}>
    <sidebar style={{ flex: 1 }}>Left bar</sidebar>
    <DragSizing
      border="left"
      style={{ minWidth: '15%', maxWidth: '85%', width: '50%' }}
      handlerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}
    >
      <main>Main content</main>
    </DragSizing>
  </div>,
  mountNode
);

for react < 16.8 we need hooks polyfill workaround

// todo

This project was bootstrapped with create-react-library & react-ts-demo.

You might also like...
A simple component for making elements draggable

React Draggable Component A simple component for making elements draggable.

Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Drag and Drop for React
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

A draggable and resizable grid layout with responsive breakpoints, for React.
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

Drag and Drop for React
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

A modern, lightweight, performant, accessible and  extensible drag & drop toolkit for React.
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Drag and Drop for React

Drag and Drop for React

Comments
  • Not compatible with React 17

    Not compatible with React 17

    When trying to install this to a react 17 app it throws an error since the package is set to use react 16. Can this package be updated to use react 17? image

    react17 
    opened by rekrap42 1
:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

bokuweb 614 Nov 16, 2022
Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Akinwunmi Aguda 7 Jul 11, 2022
React draggable component

A simple component for making elements draggable.

RGL 8k Dec 8, 2022
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Fateh Farooqui 38 Oct 17, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 99 Nov 25, 2022
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 281 Nov 25, 2022
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

浅搁 224 Oct 9, 2022
A rectangle react component which can be resized and rotated

React-resizable-rotatable-draggable-rectangle A react widget that can be resized and rotated via a handler. Installation npm install --save react-resi

MockingBot 237 Nov 11, 2022
React component which implements scrolling via holding the mouse button or touch

React Indiana Drag Scroll Implements scroll on drag Examples / Sandbox Welcome to journey! Try it yourself! Go to demo website. Install npm install --

null 407 Dec 5, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

?? react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022