2.6.2 • Published 2 months ago
react-virtual-drag-list v2.6.2
react-virtual-drag-list
A virtual scrolling list component that can be sorted by dragging
Live Demo
Simple Usage
npm i react-virtual-drag-list
Root component:
import VirtualList from 'react-virtual-drag-list';
function Virtual() {
const [list, setList] = useState([{id: '1', text: 'a'}, {id: '2', text: 'b'}, ...]);
const onTop = () => {
// scrolled to the top of list
}
const onBottom = () => {
// scrolled to the bottom of list
}
const onDrop = (params) => {
// dnd complete
setList(() => params.list);
}
// use style and className as jsx used
return (
<VirtualList
className="virtual-list"
style={{ height: '500px' }}
dataKey="id"
dataSource={ list }
handle=".handle"
header={ <div className="loading">top loading...</div> }
footer={ <div className="loading">bottom loading...</div> }
v-top={ onTop }
v-bottom={ onBottom }
v-drop={ onDrop }
>
{
(record, index, dataKey) => {
return (
<div>
<span class=".handle">{ index }</span>
{ record.text }
</div>
)
}
}
</VirtualList>
)
}
Props
Callback
Emit | Type | Required? | Default | Description |
---|---|---|---|---|
v-top | Function | - | Scrolling to the top of the scroller | |
v-bottom | Function | - | Scrolling to the bottom of the scroller | |
v-drag | Function | - | Drag is started | |
v-drop | Function | - | Drag is complete | |
v-add | Function | - | Element is dropped into the list from another | |
v-remove | Function | - | Element is removed from the list into another |
Common used
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
dataKey | String | ✓ | - | The unique identifier of each piece of data, in the form of 'a.b.c' |
dataSource | Array | ✓ | [] | The data that needs to be rendered |
size | Number | - | Estimated height of each row. You can choose to pass it or not, it will be automatically calculated | |
keeps | Number | 30 | The number of lines rendered by the virtual scroll | |
handle | Function/String | - | Drag handle selector within list items | |
group | Object/String | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false } | |
scroller | Document \| HTMLElement | - | Virtual list scrolling element | |
direction | vertical \| horizontal | vertical | Scroll direction | |
lockAxis | x \| y | - | Axis on which dragging will be locked | |
keepOffset | Boolean | false | When scrolling up to load data, keep the same offset as the previous scroll | |
debounceTime | Number | 0 | debounce time on scroll | |
throttleTime | Number | 0 | debounce time on scroll | |
header | JSX.Element | - | Top of list | |
footer | JSX.Element | - | Bottom of list |
Uncommonly used
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
draggable | String | - | Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged | |
disabled | Boolean | false | Disables the sortable if set to true | |
animation | Number | 150 | Drag-and-drop's animation delay | |
autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container | |
scrollThreshold | Number | 55 | Threshold to trigger autoscroll | |
delay | Number | 0 | Time in milliseconds to define when the sorting should start | |
delayOnTouchOnly | Boolean | false | Only delay on press if user is using touch | |
fallbackOnBody | Boolean | false | Appends the ghost element into the document's body | |
rootTag | String | div | Label type for root element | |
wrapTag | String | div | Label type for list wrap element | |
wrapStyle | Object | {} | List wrapper element style | |
wrapClass | String | '' | List wrapper element class | |
itemTag | String | div | Label type for list item element | |
itemStyle | Object | {} | List item element style | |
itemClass | String | '' | List item element class | |
ghostStyle | Object | {} | The style of the mask element when dragging | |
ghostClass | String | '' | The class of the mask element when dragging | |
chosenClass | String | '' | The class of the selected element when dragging |
Methods
Use the methods exposed in the component by setting ref
...
const virtualRef = useRef();
const scrollToBottom = () => {
virtualRef.current.scrollToBottom();
}
return (
<button onClick={ scrollToBottom }></button>
<virtualList
ref={ virtualRef }
...
>
{
(record) => <div>{ record.text }</div>
}
</virtualList>
)
Prop | Description |
---|---|
getSize(key) | get the height of the specified item by key value |
getOffset() | get the current scroll top/left |
getClientSize() | Get wrapper element client viewport size (width or height) |
getScrollSize() | Get all scroll size (scrollHeight or scrollWidth) |
scrollToTop() | scroll to the top of the list |
scrollToBottom() | scroll to the bottom of the list |
scrollToKey(key) | scroll to the specified data-key |
scrollToIndex(index) | scroll to the specified index value |
scrollToOffset(offset) | scroll to the specified height |
2.6.2
2 months ago
2.6.1
2 months ago
2.6.0
2 months ago
2.5.0
11 months ago
2.5.2
10 months ago
2.5.1
10 months ago
2.4.6
2 years ago
2.4.1
2 years ago
2.4.0
2 years ago
2.4.3
2 years ago
2.4.2
2 years ago
2.4.5
2 years ago
2.4.4
2 years ago
2.3.0
2 years ago
2.2.0
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago