react-sortablejs

constructor

constructor(props: ReactSortableProps<T>);

property defaultProps

static defaultProps: Partial<ReactSortableProps<any>>;

method callOnHandlerProp

callOnHandlerProp: (evt: SortableEvent, evtName: AllMethodsExceptMove) => void;

• Calls the props.on[Handler] function

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: ReactSortableProps<T>) => void;

method makeOptions

makeOptions: () => Options;

• Converts all the props from ReactSortable into the options object that Sortable.create(el, [options]) can use.

method onAdd

onAdd: (evt: MultiDragEvent) => void;

method onChoose

onChoose: (evt: SortableEvent) => void;

method onDeselect

onDeselect: (evt: MultiDragEvent) => void;

method onEnd

onEnd: () => void;

method onRemove

onRemove: (evt: MultiDragEvent) => void;

method onSelect

onSelect: (evt: MultiDragEvent) => void;

method onSpill

onSpill: (evt: SortableEvent) => void;

method onStart

onStart: () => void;

method onUnchoose

onUnchoose: (evt: SortableEvent) => void;

method onUpdate

onUpdate: (evt: MultiDragEvent) => void;

method prepareOnHandlerProp

prepareOnHandlerProp: (
    evtName: Exclude<AllMethodsExceptMove, HandledMethodNames>
) => (evt: SortableEvent) => void;

• Prepares a method that will be used in the sortable options to call an on[Handler] prop

method prepareOnHandlerPropAndDOM

prepareOnHandlerPropAndDOM: (
    evtName: HandledMethodNames
) => (evt: SortableEvent) => void;

• Prepares a method that will be used in the sortable options to call an on[Handler] prop & an on[Handler] ReactSortable method.

method render

render: () => JSX.Element;

property chosen

chosen?: boolean;

• When true, the item is deemed "chosen", which basically just a mousedown event.

property filtered

filtered?: boolean;

• When true, it will not be possible to pick this item up in the list.

property id

id: string | number;

• The unique id associated with your item. It's recommended this is the same as the key prop for your list item.

property selected

selected?: boolean;

• When true, the item is selected using MultiDrag

index signature

[property: string]: any;

property children

children?: ReactNode;

property className

className?: string;

property clone

clone?: (currentItem: T, evt: SortableEvent) => T;

• If this is provided, the function will replace the clone in place.

  When an is moved from A to B with pull: 'clone', the original element will be moved to B and the new clone will be placed in A

property id

id?: string;

property list

list: T[];

• The list of items to use.

property setList

setList: (newState: T[], sortable: Sortable | null, store: Store) => void;

• Sets the state for your list of items.

property style

style?: CSSProperties;

property tag

tag?: ForwardRefExoticComponent<RefAttributes<any>> | keyof ReactHTML;

• If parsing in a component WITHOUT a ref, an error will be thrown.

  To fix this, use the forwardRef component.

  Example 1

  forwardRef<HTMLElement, YOURPROPS>((props, ref) => <button {...props} ref={ref} />)

property dragging

dragging: null | ReactSortable<any>;