apeman-react-draggable

apeman react package for draggable component.

Usage no npm install needed!

<script type="module">
  import apemanReactDraggable from 'https://cdn.skypack.dev/apeman-react-draggable';
</script>

README

apeman-react-draggable

Build Status Code Climate Code Coverage npm Version JS Standard

apeman react package for draggable component.

Installation

$ npm install apeman-react-draggable --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {ApDraggable, ApDraggableStyle} from 'apeman-react-draggable'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <ApDraggableStyle/>
        <ApDraggable onStart={ () => {

                } }
                     onMove={ () => {

                 } }
                     onEnd={ () => {

                 } }
                     direction="ALL">
          <div>Drag me!</div>
        </ApDraggable>
      </div>
    )
  }
})

Components

ApDraggableStyle

Props

Name Type Default Description
style object {}

ApDraggable

Props

Name Type Default Description
onStart func
onMove func
onStop func
shouldMove func function() {
return true
}
direction enum 'ALL'
x number
minX number Number.MIN_SAFE_INTEGER (-9007199254740991)
maxX number Number.MAX_SAFE_INTEGER (9007199254740991)
y number
minY number Number.MIN_SAFE_INTEGER (-9007199254740991)
maxY number Number.MAX_SAFE_INTEGER (9007199254740991)

Props

Name Type Default Description
onStart function Callback when drag started.
onMove function Callback when drag moved.
onStop function Callback when drag stopped.
shouldMove function Called when drag moved. Returns false to cancel moving.
direction string Move direction.
x number X position.
minX number MIN_SAFE_INTEGER Min x position.
maxX number MAX_SAFE_INTEGER Max x position.
y number Y potion.
minY number MIN_SAFE_INTEGER Min y position.
maxY number MAX_SAFE_INTEGER Max y position.

Directions

License

This software is released under the MIT License.

Links