draggable-react

React components for Shopify's draggable

Table of Contents

• Installation
• Usage
• Contribute
• License
• Changelog

Installation

1$ yarn add draggable-react

Usage

This library is still a work in progress. Currently, we expose 3 APIs:

1. A DraggableProvider component
2. A DraggableContainer component
3. A withDraggable higher-order component

Basic example

To start off, we can use the containerized variant of the DraggableProvider, which automatically creates a default DraggableContainer around our app. Simply replace your main <App /> component with some thing like this:

1<DraggableProvider containerized>
2  <App />
3</DraggableProvider> 

Next, wrap whichever components you wish to make draggable with the HOC, then consume the draggable prop and use its className. For example:

1const DraggableDiv = withDraggable()(({draggable, children}) => (
2  <div className={draggable.className}>
3    {children}
4  </div>
5));

If you want the supplied prop to have a name other than draggable, you can specify that in the options. For example:

1const DraggableDiv = withDraggable({prop: 'drag'})(({drag, children}) => (
2  <div className={drag.className}>
3    {children}
4  </div>
5));

Contribute

Check out our Contributing Guidelines

License

MIT, see LICENSE.md for details.