react-sortablejs

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

Install

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

Overview

React bindings to [SortableJS](https://github.com/SortableJS/Sortable)

Index

Classes

class ReactSortable

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

    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;

                                  Interfaces

                                  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<
                                                  Record<
                                                  AllMethodsExceptMove,
                                                  (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<
                                                  AllMethodsExceptMove,
                                                  HandledMethodNames | 'onMove'
                                                  >;

                                                    Package Files (1)

                                                    Dependencies (2)

                                                    Dev Dependencies (30)

                                                    Peer Dependencies (4)

                                                    Badge

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

                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-sortablejs.

                                                    • Markdown
                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-sortablejs)
                                                    • HTML
                                                      <a href="https://www.jsdocs.io/package/react-sortablejs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>