Wil-react-rnd NPM

Wil React Rnd

Component Modal Drag & Resize For React

Installation

npm

npm install wil-react-rnd --save

yarn

yarn add wil-react-rnd

Example

https://codesandbox.io/s/wil-rnd-5n4o1

import React from "react";
import WilRnd from "wil-react-rnd";

class App extends React.Component {
  render() {
    return (
      <WilRnd
        defaultMeasure={{ width: 500, height: 300, top: 100, left: 100 }}
        widthRange={[100, 1200]}
        heightRange={[100, 1000]}
        dragHorizontalRange={[0, window.innerWidth]}
        dragVerticalRange={[0, window.innerHeight]}
        onEnd={console.log}
      >
        {({ dragRef, isStartResizable, isStartDraggable }) => (
          <div>
            <button ref={dragRef}>Drag me</button>
            Content
          </div>
        )}
      </WilRnd>
    )
  }

API

Prop	Type	Default	Description
widthRange	`Array<number>`	`[0, Infinity]`	min width, max width
heightRange	`Array<number>`	`[0, Infinity]`	min height, max height
dragHorizontalRange	`Array<number>`	`[-Infinity, Infinity]`	min drag horizontal, max drag horizontal
dragVerticalRange	`Array<number>`	`[-Infinity, Infinity]`	min drag vertical, max drag vertical
containerClassName	`string`	-	className for component container
children	`({ dragRef: HTLMElement, isStartResizable: boolean, isStartDraggable: boolean }) => React.Node`	-	dragRef example: `<button ref={dragRef}>Drag me</button>`, isStartResizable: when component resizing, isStartDraggable: when component dragging
onDragStart	`(measure: Object) => void`	-	Callback executed when component drag start
onResizeStart	`(placement: string, measure: Object) => void`	-	Callback executed when component resize start
onDrag	`(measure: Object) => void`	-	Callback executed when component dragging
onResize	`(measure: Object) => void`	-	Callback executed when component resizing
onEnd	`(measure: Object) => void`	-	Callback executed when component drag & resize stop
onResizeDebounce	`(measure: Object) => void`	-	Callback executed when component resizing ( using prop timeDebounce)
timeDebounce	`number`	`400`	timeDebounce for prop onResizeDebounce