{"repo":"tajo/react-movable","free":true,"listed":false,"github":"https://github.com/tajo/react-movable","clone":"git clone https://github.com/tajo/react-movable.git","description":"🔀 Drag and drop for your React lists and tables. Accessible. Tiny.","language":"TypeScript","stars":1674,"topics":["react","drag-and-drop","movable","dnd","sortable","order","component"],"license":"MIT","category":"deployment-docker-iac","readme_excerpt":"react-movable See all the other examples and their source code! Try it out in the Stackblitz sandbox! Installation Usage Features - Vertical drag and drop for your lists and tables - No wrapping divs or additional markup - Simple single component, no providers or HoCs - Unopinionated styling, great for CSS in JS too - Accessible , made for keyboards and screen readers - Touchable , works on mobile devices - Full control over the dragged item, it's a portaled React component - Autoscrolling when dragging (both for containers and the window) - Scrolling with the mousewheel / trackpad when dragging - Works with semantic table rows too - Smooth animations , can be disabled - Varying heights of items supported - Optional lock of the horizontal axis when dragging - No dependencies, less than 4kB (gzipped) - Coverage by e2e playwright tests Keyboard support - tab and shift+tab to focus items - space to lift or drop the item - j or arrow down to move the lifted item down - k or arrow up to move the lifted item up - escape to cancel the lift and return the item to its initial position props renderList renderList prop to define your list (root) element. Your function gets three parameters and should return a React component : - props containing ref - this needs to be spread over the root list element, note that items need to be direct children of the DOM element that's being set with this ref - children - the content of the list - isDragged - true if any item is being dragged renderIte","default_branch":null,"files":null,"tree":[],"storefront":"/r/tajo","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/tajo/react-movable/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}