0.2.8 • Published 6 years ago
react-smooth-draggable-list v0.2.8
React Smooth Draggable List
smooth, mobile-friendly, draggable list component for react.
:star: Check out the Demo :star:
How to Use It
Install
This component can be installed with npm:
npm install react-smooth-draggable-list --saveInclude
import List from 'react-smooth-draggable-list'Examples
Simple Example:
const items = [1, 2, 3]
<List rowHeight={80}>{
items.map(item => <List.Item>item {item}</List.Item>)
}</List>Controlled Example:
class MyList extends React.Component {
// order index starts at zero
state = {order: [1, 0, 2]}
render() {
return (
<List
rowHeight={50}
order={this.state.order}
onReOrder={order => this.setState({order})}
>
<List.Item>item 1</List.Item>
<List.Item>item 2</List.Item>
<List.Item>item 3</List.Item>
</List>
)
}
}More:
You can find more examples in the demo source code.
Props
List:
| Name | Type | Default | Description |
|---|---|---|---|
order | array | null | order is optional - when it is not defined, the list will be uncontrolled. |
onReOrder | (order) => {} | null | The onReOrder callback is invoked every time a user changes the list order. order is a list of integers representing the order of items. |
rowHeight | integer | 0 | Required: RowHeight defines the height of each list item in pixels. |
rowWidth | integer | null | RowWidth defines the width of the list component in pixels. Width defaults to 100% of parent. |
gutter | number | null | Amount of space between list items in pixels. Defaults to 0.1 * props.rowHeight. |
springConfig | object | null | Drag animation control. Object has three keys. stiffness: optional, defaults to 300. damping: optional, defaults to 50. precision: optional, defaults to 0.05. |
List.Item:
| Name | Type | Default | Description |
|---|---|---|---|
dragHandle | Component | null | Pass in a functional component. See DragHandle in demo source code for an example. |
disabled | boolean | false | Allows user to disable list items. |
How to Contrubite
# install with dev dependencies
npm install react-smooth-draggable-list --save-dev
# run the dev server on port 2100
npm run devnpm run dev will run a dev server with hot reloading enabled. The dev server runs at http://localhost:2100. Dev server source code is here.