Skip to content

evenchange4/react-draggable-playground

Repository files navigation

react-draggable-playground

Reusable React-draggable components with render props.

Travis Codecov Status npm package npm downloads

Dependency Status devDependency Status peerDependency Status

prettier license

Installation

$ yarn add react-draggable-playground

Demo

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.

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

About

Reusable React-draggable components with render props.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published