draggable-react v1.0.0-beta.12
draggable-react
React components for Shopify's draggable
Table of Contents
Installation
$ 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:
<DraggableProvider containerized>
<App />
</DraggableProvider>
Next, wrap whichever components you wish to make draggable with the HOC,
then consume the draggable
prop and use its className
. For example:
const DraggableDiv = withDraggable()(({draggable, children}) => (
<div className={draggable.className}>
{children}
</div>
));
If you want the supplied prop to have a name other than draggable
, you can specify that in the options. For example:
const DraggableDiv = withDraggable({prop: 'drag'})(({drag, children}) => (
<div className={drag.className}>
{children}
</div>
));
Contribute
Check out our Contributing Guidelines
License
MIT, see LICENSE.md for details.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago