react-draggable-playground

Reusable React-draggable components with render props.

Installation

$ yarn add react-draggable-playground

Demo

• https://react-draggable-playground.netlify.com/

Usage

import { DraggableParent, DraggableItem } from 'react-draggable-playground';

<DraggableParent height={300} width={300}>
  <DraggableItem
    defaultPosition={{ x: 100, y: 100 }}
    onPositionChange={(position: Position) => {}}
  >
    {({ isDragging }) => <div>item</div>}
  </DraggableItem>
</DraggableParent>;

API

type Position = {
  x: number,
  y: number,
};

// DraggableItem
type Props = {
  children: ({ isDragging: boolean, disabled: boolean }) => React.Node,
  disabled: boolean,
  onPositionChange?: Position => Promise<void> | void,
  defaultPosition?: Position,
};

// DraggableParent
type Props = {
  height: number,
  width: number,
  children?: React.Node,
  style?: Object,
};

Development

Requirements

• node >= 9.8.0
• yarn >= 1.5.1

$ yarn install --pure-lockfile
$ yarn start

Test

$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests.

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org