• Version 6.1.4
  • Published
  • 74.1 kB
  • 2 dependencies
  • MIT license


npm i react-sortablejs
yarn add react-sortablejs
pnpm add react-sortablejs


React bindings to [SortableJS](



class ReactSortable

class ReactSortable<T extends ItemInterface> extends Component<
> {}


    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;


                                  interface ItemInterface

                                  interface ItemInterface {}

                                    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;

                                      interface ReactSortableProps

                                      interface ReactSortableProps<T>
                                      extends ReactSortableOptions,
                                      Omit<Options, AllMethodNames> {}

                                        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} />)

                                                interface Store

                                                interface Store {}
                                                • Holds the react component as a reference so we can access it's store.

                                                  Mainly used to access props.list within another components.

                                                property dragging

                                                dragging: null | ReactSortable<any>;

                                                  Type Aliases

                                                  type AllMethodNames

                                                  type AllMethodNames =
                                                  | 'onAdd'
                                                  | 'onChange'
                                                  | 'onChoose'
                                                  | 'onClone'
                                                  | 'onEnd'
                                                  | 'onFilter'
                                                  | 'onMove'
                                                  | 'onRemove'
                                                  | 'onSort'
                                                  | 'onSpill'
                                                  | 'onStart'
                                                  | 'onUnchoose'
                                                  | 'onUpdate'
                                                  | 'onSelect'
                                                  | 'onDeselect';
                                                  • All method names starting with on in Sortable.Options

                                                  type AllMethodsExceptMove

                                                  type AllMethodsExceptMove = Exclude<AllMethodNames, 'onMove'>;
                                                  • Same as SortableMethodKeys type but with out the string onMove.

                                                  type HandledMethodNames

                                                  type HandledMethodNames =
                                                  | 'onAdd'
                                                  | 'onRemove'
                                                  | 'onUpdate'
                                                  | 'onStart'
                                                  | 'onEnd'
                                                  | 'onSpill'
                                                  | 'onSelect'
                                                  | 'onDeselect'
                                                  | 'onChoose'
                                                  | 'onUnchoose';
                                                  • Method names that fire in this, when this is react-sortable

                                                  type ReactSortableOptions

                                                  type ReactSortableOptions = Partial<
                                                  (evt: SortableEvent, sortable: Sortable | null, store: Store) => void
                                                  > & {
                                                  * The default sortable behaviour has been changed.
                                                  * If the return value is void, then the defaults will kick in.
                                                  * it saves the user trying to figure it out.
                                                  * and they can just use onmove as a callback value
                                                  onMove?: (
                                                  evt: MoveEvent,
                                                  originalEvent: Event,
                                                  sortable: Sortable | null,
                                                  store: Store
                                                  ) => boolean | -1 | 1 | void;
                                                  • Change the on[...] methods in Sortable.Options, so that they all have an extra arg that is store: Store

                                                  type UnHandledMethodNames

                                                  type UnHandledMethodNames = Exclude<
                                                  HandledMethodNames | 'onMove'

                                                    Package Files (1)

                                                    Dependencies (2)

                                                    Dev Dependencies (30)

                                                    Peer Dependencies (4)


                                                    To add a badge like this badgeto your package's README, use the codes available below.

                                                    You may also use to create a custom badge linking to

                                                    • Markdown
                                                    • HTML
                                                      <a href=""><img src="" alt=""></a>