https://github.com/limoer96/resize-draggable
A React component that can be used for sizing by dragging.
https://github.com/limoer96/resize-draggable
component draggable-elements resizer
Last synced: 9 months ago
JSON representation
A React component that can be used for sizing by dragging.
- Host: GitHub
- URL: https://github.com/limoer96/resize-draggable
- Owner: Limoer96
- Created: 2019-08-12T06:21:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:58:34.000Z (over 3 years ago)
- Last Synced: 2025-08-10T21:29:13.571Z (10 months ago)
- Topics: component, draggable-elements, resizer
- Language: JavaScript
- Size: 3.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README-en.md
Awesome Lists containing this project
README
# resize-draggable
A react component that can be used for sizing by dragging.
```html
```
## Install
```bash
$ yarn add resize-draggable
```
## Usage
```js
// es6
import ResizeDraggable from "resize-draggable";
import "resize-draggable/dist/main.css";
// CommonJS
const ResizeDraggable = require("resize-draggable");
require("resize-draggable/dist/main.css");
```
##
`` component is placed between two elements. it will change these two elsement by dragging. You can also click the bar on it to expand/collapse the elements in the specified direction.
See the [demo](http://212.64.77.74/resize-draggable/) for more.
```js
import React from "react";
import { render } from "react-dom";
import Draggleable from "resize-draggable";
import "resize-draggable/dist/main.css";
import "./index.css";
const App = () => (
Prev Element
Next Element
Prev Element
Next Element
Prev Element
Next Element
Prev Element
Next Element
);
render(, document.getElementById("root"));
```
## props
```js
{
// the expand/collapse bar direction, also decided the axis of the draggable
// east west north south
// if direction is 'n' or 's', the `axis` is 'y'
direction: 'e' || 'w' || 'n' || 's',
// show the expand/collapse bar or not, default is true
closable?: boolean,
// allow drag or not, default: false
dragDisabled?: boolean,
// Set to true if the opposite direction element is adaptive(eg flex:1 or use % width/height). default: false
adaptive?: boolean,
// the expand/collapse bar closed or not init, default is false.
defaultClosed?: boolean,
// the draggable element default position, default { x: 0, y: 0 }
// more about the prop, see: https://www.npmjs.com/package/react-draggable
defaultPosition?: object,
// custom function trigger when size changed
onResize?: (e, data) => {...}
// custom function called when expand/collapse one element
onToggleClose?: (e, prevElement, nextElement) => {...}
// custom style of this component
style?: object,
}
```