- Notifications
You must be signed in to change notification settings - Fork218
React bindings for SortableJS
License
SortableJS/react-sortablejs
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React bindings toSortableJS
Please note that this is not considered ready for production, as there are still a number of bugs being sent through.
sortablejs and@types/sortablejs are peer dependencies. The latter is only used if intellisense/typescript is desired.
npm install --save react-sortablejs sortablejsnpm install --save-dev @types/sortablejs# ORyarn add react-sortablejs sortablejsyarn add -D @types/sortablejsHere is the TLDR of what sortable is:
- Shopping List: # list of items / sortable. This represents`react-sortablejs`- eggs # list item. These are all the items in the list and are what you move around.- bread # list item- milk # list item
importReact,{FC,useState}from"react";import{ReactSortable}from"react-sortablejs";interfaceItemType{id:number;name:string;}exportconstBasicFunction:FC=(props)=>{const[state,setState]=useState<ItemType[]>([{id:1,name:"shrek"},{id:2,name:"fiona"},]);return(<ReactSortablelist={state}setList={setState}>{state.map((item)=>(<divkey={item.id}>{item.name}</div>))}</ReactSortable>);};
importReact,{Component}from"react";import{ReactSortable}from"react-sortablejs";interfaceBasicClassState{list:{id:string;name:string}[];}exportclassBasicClassextendsComponent<{},BasicClassState>{state:BasicClassState={list:[{id:"1",name:"shrek"}],};render(){return(<ReactSortablelist={this.state.list}setList={(newState)=>this.setState({list:newState})}>{this.state.list.map((item)=>(<divkey={item.id}>{item.name}</div>))}</ReactSortable>);}}
Sortable has some pretty cool plugins such as MultiDrag and Swap.
By Default:
- AutoScroll is premounted and enabled.
- OnSpill is premounted and NOT enabled.
- MultiDrag and Swap and NOT premounted and NOT enabled
You must mount the plugin with sortableONCE ONLY.
importReactfrom"react";import{ReactSortable,Sortable,MultiDrag,Swap}from"react-sortablejs";// mount whatever plugins you'd like to. These are the only current options.Sortable.mount(newMultiDrag(),newSwap());constApp=()=>{const[state,setState]=useState([{id:1,name:"shrek"},{id:2,name:"fiona"},]);return(<ReactSortablemultiDrag// enables mutidrag// ORswap// enables swap>{state.map((item)=>(<divkey={item.id}>{item.name}</div>))}</ReactSortable>);};
For a comprehensive list of options, please visithttps://github.com/SortableJS/Sortable#options.
Those options are applied as follows.
Sortable.create(element,{group:" groupName",animation:200,delayOnTouchStart:true,delay:2,});// --------------------------// Will now be...// --------------------------importReactfrom"react";import{ReactSortable}from"react-sortablejs";constApp=()=>{const[state,setState]=useState([{id:1,name:"shrek"},{id:2,name:"fiona"},]);return(<ReactSortable// here they are!group="groupName"animation={200}delayOnTouchStart={true}delay={2}>{state.map((item)=>(<divkey={item.id}>{item.name}</div>))}</ReactSortable>);};
These are all default DOM attributes. Nothing special here.
The same asstate inconst [ state, setState] = useState([{ id: 1}, {id: 2}])
state must be an array of items, with each item being an object that has the following shape:
/** The unique id associated with your item. It's recommended this is the same as the key prop for your list item. */ id:string|number;/** When true, the item is selected using MultiDrag */ selected?:boolean;/** When true, the item is deemed "chosen", which basically just a mousedown event. */ chosen?:boolean;/** When true, it will not be possible to pick this item up in the list. */ filtered?:boolean;[property: string]: any;
The same assetState inconst [ state, setState] = useState([{ id: 1}, {id: 2}])
If you're using{group: { name: 'groupName', pull: 'clone'}}, this means you're in 'clone' mode. You should provide a function for this.
Check out the source code of the clone example for more information. I'll write it here soon.
ReactSortable is adiv element by default. This can be changed to be any HTML element (for exampleul,ol)or can be a React component.
This value, be it the component or the HTML element, should be passed down underprops.tag.
Let's explore both here.
Here we will use anul. You can use any HTML.Just add the string and ReactSortable will use aul instead of adiv.
importReact,{FC,useState}from"react";import{ReactSortable}from"react-sortablejs";exportconstBasicFunction:FC=(props)=>{const[state,setState]=useState([{id:"1",name:"shrek"}]);return(<ReactSortabletag="ul"list={state}setList={setState}>{state.map((item)=>(<likey={item.id}>{item.name}</li>))}</ReactSortable>);};
When using a custom component in thetag prop, the only component it allows is aforwardRef component.Currently, we only support components that use theReact.forwardRef API.
If it doesn't have one, you can add one usingReact.forwardRef().
todo: Some third-party UI components may have nested elements to create the look they're after.This could be an issue and not sure how to fix it.
importReact,{FC,useState,forwardRef}from"react";import{ReactSortable}from"react-sortablejs";// This is just like a normal component, but now has a ref.constCustomComponent=forwardRef<HTMLDivElement,any>((props,ref)=>{return<divref={ref}>{props.children}</div>;});exportconstBasicFunction:FC=(props)=>{const[state,setState]=useState([{id:1,name:"shrek"},{id:2,name:"fiona"},]);return(<ReactSortabletag={CustomComponent}list={state}setList={setState}>{state.map((item)=>(<divkey={item.id}>{item.name}</div>))}</ReactSortable>);};
Sortable affects the DOM, adding, and removing nodes/css when it needs to in order to achieve the smooth transitions we all know an love.This component reverses many of its actions of the DOM so React can handle this when the state changes.
DO NOT use the index as a key for your list items. Sorting will not work.
In all the examples above, I used an object with an ID. You should do the same!
I may even enforce this into the design to eliminate errors.
Basically, the child updates the state twice. I'm working on this.
Our usage indicates that as long as we only move items between lists that don't use the samesetState function.
I hope to provide an example soon.
We don't have anything that works 100%, but here I'd like to spitball some potential avenues to look down.
- Use
onMoveto handle state changes instead ofonAdd,onRemove, etc. - Create a Sortable plugin specifically for react-sortbalejs
About
React bindings for SortableJS
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.