1.0.1 • Published 3 years ago

react-native-drag-resize-elements v1.0.1

Weekly downloads
4
License
MIT
Repository
-
Last release
3 years ago

react-native-drag-resize-element

React Native component for draggable and resizable manipulation.

Getting Started

Installation

$ npm i react-native-drag-resize-element --save

Basic Usage

  • Install react-native-drag-resize-element package to project

  • Import module to file

import {
  DragResizeBlock,
} from 'react-native-drag-resize-element';
  • Then, use component like this:
<DragResizeBlock
  x={0}
  y={0}
>
  <View
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: 'red',
    }}
  />
</DragResizeBlock>

You can watch more examples in example directory

Properties

Basic props of DragResizeBlock

PropDefaultTypeDescription
x0numberx coordinate relative of parent element.
y0numbery coordinate relative of parent element.
w100numberComponent width in pixels.
h100numberComponent height in pixels.
minW50numberComponent minimal width in pixels.
minH50numberComponent minimal height in pixels.
zIndex1numberComponent z index.
axisallstringAllow axis for component manipulation.
limitationnullobjectLimit area for manipulation. Object format {x: number, y: number, w: number, h: number}. Use DragResizeContainer component for calculate limitation. See code in example.
isDisabledfalseboolDisable component manipulation. Hide connectors.
isDraggabletrueboolAllow drag component manipulation.
isResizabletrueboolAllow resize component manipulation.
connectors'tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'c'arrayShow available connectors.
onPress-functionHandle press event. Input argument event.
onDragStart-functionHandle drag start event. Input argument [x, y].
onDrag-functionHandle drag event. Input argument [x, y].
onDragEnd-functionHandle drag end event. Input argument [x, y].
onResizeStart-functionHandle resize start event. Input argument [x, y].
onResize-functionHandle resize event. Input argument [x, y].
onResizeEnd-functionHandle resize end event. Input argument [x, y].

Basic props of DragResizeContainer

PropDefaultTypeDescription
onInit-functionReturn container parameters {x, y, w, h}, after component initialization. You can send this object to limitation property of DragResizeBlock component.
style-styleCustom styles.

Run example

reactreact-nativeresizabledragiosandroid
prop-types
@everything-registry/sub-chunk-2576@infinitebrahmanuniverse/nolb-react-native-d
1.0.1

3 years ago

1.0.0

3 years ago