react-dnd

  • Version 14.0.4
  • Published
  • 696 kB
  • 5 dependencies
  • MIT license

Install

npm i react-dnd
yarn add react-dnd
pnpm add react-dnd

Overview

Drag and Drop for React

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DndContext

const DndContext: any;
  • Create the React Context

variable DndProvider

const DndProvider: any;
  • A React component that provides the React-DnD context

variable DragPreviewImage

const DragPreviewImage: any;
  • A utility for rendering a drag preview image

Functions

function DragLayer

DragLayer: <RequiredProps, CollectedProps = any>(
collect: DragLayerCollector<RequiredProps, CollectedProps>,
options?: DndOptions<RequiredProps>
) => DndComponentEnhancer<CollectedProps>;
  • Parameter collect

    The props collector function

    Parameter options

    The DnD options

function DragSource

DragSource: <
RequiredProps,
CollectedProps = any,
DragObject = any,
DropResult = any
>(
type: any,
spec: DragSourceSpec<RequiredProps, DragObject, DropResult>,
collect: DragSourceCollector<CollectedProps, RequiredProps>,
options?: DndOptions<RequiredProps>
) => DndComponentEnhancer<CollectedProps>;
  • Decorates a component as a dragsource

    Parameter type

    The dragsource type

    Parameter spec

    The drag source specification

    Parameter collect

    The props collector function

    Parameter options

    DnD options

function DropTarget

DropTarget: <
RequiredProps,
CollectedProps = any,
DragObject = any,
DropResult = any
>(
type: any,
spec: DropTargetSpec<RequiredProps, DragObject, DropResult>,
collect: DropTargetCollector<CollectedProps, RequiredProps>,
options?: DndOptions<RequiredProps>
) => DndComponentEnhancer<CollectedProps>;
  • Parameter type

    The accepted target type

    Parameter spec

    The DropTarget specification

    Parameter collect

    The props collector function

    Parameter options

    Options

function useDrag

useDrag: <DragObject, DropResult, CollectedProps>(
specArg: FactoryOrInstance<
DragSourceHookSpec<DragObject, DropResult, CollectedProps>
>,
deps?: unknown[]
) => [CollectedProps, ConnectDragSource, ConnectDragPreview];
  • useDragSource hook

    Parameter sourceSpec

    The drag source specification (object or function, function preferred)

    Parameter deps

    The memoization deps array to use when evaluating spec changes

function useDragDropManager

useDragDropManager: () => any;
  • A hook to retrieve the DragDropManager from Context

function useDragLayer

useDragLayer: <CollectedProps>(
collect: (monitor: any) => CollectedProps
) => CollectedProps;
  • useDragLayer Hook

    Parameter collector

    The property collector

function useDrop

useDrop: <DragObject, DropResult, CollectedProps>(
specArg: FactoryOrInstance<
DropTargetHookSpec<DragObject, DropResult, CollectedProps>
>,
deps?: unknown[]
) => [CollectedProps, ConnectDropTarget];
  • useDropTarget Hook

    Parameter spec

    The drop target specification (object or function, function preferred)

    Parameter deps

    The memoization deps array to use when evaluating spec changes

Interfaces

interface DndComponent

interface DndComponent<Props> extends Component<Props> {}
  • A DnD interactive component

method getDecoratedComponentInstance

getDecoratedComponentInstance: () => Component<Props> | null;

    method getHandlerId

    getHandlerId: () => any;

      interface DndContextType

      interface DndContextType {}
      • The React context type

      property dragDropManager

      dragDropManager: DragDropManager | undefined;

        interface DndOptions

        interface DndOptions<Props> {}
        • Options for the Drag Sources, Drop Targets, and Drag Layers decorators

        property arePropsEqual

        arePropsEqual?: (first: Props, second: Props) => boolean;

          interface DragLayerMonitor

          interface DragLayerMonitor {}

            method getClientOffset

            getClientOffset: () => XYCoord | null;
            • Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

            method getDifferenceFromInitialOffset

            getDifferenceFromInitialOffset: () => XYCoord | null;
            • Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns null if no item is being dragged.

            method getInitialClientOffset

            getInitialClientOffset: () => XYCoord | null;
            • Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

            method getInitialSourceClientOffset

            getInitialSourceClientOffset: () => XYCoord | null;
            • Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

            method getItem

            getItem: () => any;
            • Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

            method getItemType

            getItemType: () => Identifier | null;
            • Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

            method getSourceClientOffset

            getSourceClientOffset: () => XYCoord | null;
            • Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

            method isDragging

            isDragging: () => boolean;
            • Returns true if a drag operation is in progress. Returns false otherwise.

            interface DragPreviewImageProps

            interface DragPreviewImageProps {}

              property connect

              connect: ConnectDragPreview;

                property src

                src: string;

                  interface DragPreviewOptions

                  interface DragPreviewOptions {}

                    property anchorX

                    anchorX?: number;
                    • Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated into the horizontal offset of the drag preview when their sizes don't match. 0 means “dock the preview to the left”, 0.5 means “interpolate linearly” and 1 means “dock the preview to the right”.

                    property anchorY

                    anchorY?: number;
                    • Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated into the vertical offset of the drag preview when their sizes don't match. 0 means “dock the preview to the top, 0.5 means “interpolate linearly” and 1 means “dock the preview to the bottom.

                    property captureDraggingState

                    captureDraggingState?: boolean;
                    • Optional. A boolean. By default, false. If true, the component will learn that it is being dragged immediately as the drag starts instead of the next tick. This means that the screenshotting would occur with monitor.isDragging() already being true, and if you apply any styling like a decreased opacity to the dragged element, this styling will also be reflected on the screenshot. This is rarely desirable, so false is a sensible default. However, you might want to set it to true in rare cases, such as if you want to make the custom drag layers work in IE and you need to hide the original element without resorting to an empty drag preview which IE doesn't support.

                    property offsetX

                    offsetX?: number;
                    • Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetX has a value, anchorX won't be used.

                    property offsetY

                    offsetY?: number;
                    • Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetY has a value, anchorY won't be used.

                    interface DragSourceConnector

                    interface DragSourceConnector {}
                    • DragSourceConnector is an object passed to a collecting function of the DragSource. Its methods return functions that let you assign the roles to your component's DOM nodes.

                    method dragPreview

                    dragPreview: () => ConnectDragPreview;
                    • Optional. Returns a function that may be used inside the component to assign the drag preview role to a node. By returning { connectDragPreview: connect.dragPreview() } from your collecting function, you can mark any React element as the drag preview node. To do that, replace any element with this.props.connectDragPreview(element) inside the render function. The drag preview is the node that will be screenshotted by the HTML5 backend when the drag begins. For example, if you want to make something draggable by a small custom handle, you can mark this handle as the dragSource(), but also mark an outer, larger component node as the dragPreview(). Thus the larger drag preview appears on the screenshot, but only the smaller drag source is actually draggable. Another possible customization is passing an Image instance to dragPreview from a lifecycle method like componentDidMount. This lets you use the actual images for drag previews. (Note that IE does not support this customization). See the example code below for the different usage examples.

                    method dragSource

                    dragSource: () => ConnectDragSource;
                    • Returns a function that must be used inside the component to assign the drag source role to a node. By returning { connectDragSource: connect.dragSource() } from your collecting function, you can mark any React element as the draggable node. To do that, replace any element with this.props.connectDragSource(element) inside the render function.

                    interface DragSourceHookSpec

                    interface DragSourceHookSpec<DragObject, DropResult, CollectedProps> {}

                      property canDrag

                      canDrag?:
                      | boolean
                      | ((monitor: DragSourceMonitor<DragObject, DropResult>) => boolean);
                      • Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag() inside this method.

                      property collect

                      collect?: (monitor: DragSourceMonitor<DragObject, DropResult>) => CollectedProps;
                      • A function to collect rendering properties

                      property end

                      end?: (
                      draggedItem: DragObject,
                      monitor: DragSourceMonitor<DragObject, DropResult>
                      ) => void;
                      • Optional. When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, component parameter is set to be null.

                      property isDragging

                      isDragging?: (monitor: DragSourceMonitor<DragObject, DropResult>) => boolean;
                      • Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list.

                        Note: You may not call monitor.isDragging() inside this method.

                      property item

                      item?: DragObject | DragObjectFactory<DragObject>;
                      • This property generates or defines a plain javascript item describing the data being dragged. This is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know.

                        You may be tempted to put a reference to the component or complex object here, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to use something like { id: props.id }

                        If a function-form is used, it is invoked when the drag begins and returns a draggable item. If the function returns null, the drag is canceled

                      property options

                      options?: DragSourceOptions;
                      • The drag source options

                      property previewOptions

                      previewOptions?: DragPreviewOptions;
                      • DragPreview options

                      property type

                      type: SourceType;
                      • The type of item being dragged. This is required when using the function form of spec.item. If spec.item is a static object, the type may either be defined on that object as item.type, or it may be defined here.

                      interface DragSourceMonitor

                      interface DragSourceMonitor<DragObject = unknown, DropResult = unknown>
                      extends HandlerManager,
                      MonitorEventEmitter {}

                        method canDrag

                        canDrag: () => boolean;
                        • Returns true if no drag operation is in progress, and the owner's canDrag() returns true or is not defined.

                        method didDrop

                        didDrop: () => boolean;
                        • Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag() to test whether any drop target has handled the drop. Returns false if called outside endDrag().

                        method getClientOffset

                        getClientOffset: () => XYCoord | null;
                        • Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

                        method getDifferenceFromInitialOffset

                        getDifferenceFromInitialOffset: () => XYCoord | null;
                        • Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns null if no item is being dragged.

                        method getDropResult

                        getDropResult: <T = DropResult>() => T | null;
                        • Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop() overrides the child drop result previously set by the child. Returns null if called outside endDrag().

                        method getInitialClientOffset

                        getInitialClientOffset: () => XYCoord | null;
                        • Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

                        method getInitialSourceClientOffset

                        getInitialSourceClientOffset: () => XYCoord | null;
                        • Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

                        method getItem

                        getItem: <T = DragObject>() => T;
                        • Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

                        method getItemType

                        getItemType: () => Identifier | null;
                        • Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

                        method getSourceClientOffset

                        getSourceClientOffset: () => XYCoord | null;
                        • Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

                        method getTargetIds

                        getTargetIds: () => Identifier[];
                        • Returns the ids of the potential drop targets.

                        method isDragging

                        isDragging: () => boolean;
                        • Returns true if a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.

                        interface DragSourceOptions

                        interface DragSourceOptions {}

                          property dropEffect

                          dropEffect?: string;
                          • Optional. A string. By default, 'move'. In the browsers that support this feature, specifying 'copy' shows a special “copying” cursor, while 'move' corresponds to the “move” cursor. You might want to use this option to provide a hint to the user about whether an action is destructive.

                          interface DragSourceSpec

                          interface DragSourceSpec<Props, DragObject = any, DropResult = any> {}

                            property beginDrag

                            beginDrag: (
                            props: Props,
                            monitor: DragSourceMonitor<DragObject, DropResult>,
                            component: any
                            ) => DragObject;
                            • Required. When the dragging starts, beginDrag is called. You must return a plain JavaScript object describing the data being dragged. What you return is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know. You may be tempted to put a reference to the component into it, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to return something like { id: props.id } from this method.

                            property canDrag

                            canDrag?: (
                            props: Props,
                            monitor: DragSourceMonitor<DragObject, DropResult>
                            ) => boolean;
                            • Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag() inside this method.

                            property endDrag

                            endDrag?: (
                            props: Props,
                            monitor: DragSourceMonitor<DragObject, DropResult>,
                            component: any
                            ) => void;
                            • Optional. When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, component parameter is set to be null.

                            property isDragging

                            isDragging?: (
                            props: Props,
                            monitor: DragSourceMonitor<DragObject, DropResult>
                            ) => boolean;
                            • Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list.

                              Note: You may not call monitor.isDragging() inside this method.

                            interface DropTargetConnector

                            interface DropTargetConnector {}
                            • DropTargetConnector is an object passed to a collecting function of the DropTarget. Its only method dropTarget() returns a function that lets you assign the drop target role to one of your component's DOM nodes.

                            method dropTarget

                            dropTarget: () => ConnectDropTarget;
                            • Returns a function that must be used inside the component to assign the drop target role to a node. By returning { connectDropTarget: connect.dropTarget() } from your collecting function, you can mark any React element as the droppable node. To do that, replace any element with this.props.connectDropTarget(element) inside the render function.

                            interface DropTargetHookSpec

                            interface DropTargetHookSpec<DragObject, DropResult, CollectedProps> {}
                            • Interface for the DropTarget specification object

                            property accept

                            accept: TargetType;
                            • The kinds of dragItems this dropTarget accepts

                            property canDrop

                            canDrop?: (item: DragObject, monitor: DropTargetMonitor) => boolean;
                            • Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.

                            property collect

                            collect?: (monitor: DropTargetMonitor) => CollectedProps;
                            • A function to collect rendering properties

                            property drop

                            drop?: (item: DragObject, monitor: DropTargetMonitor) => DropResult | undefined;
                            • Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop() is defined and returns false.

                            property hover

                            hover?: (item: DragObject, monitor: DropTargetMonitor) => void;
                            • Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.

                            property options

                            options?: DropTargetOptions;
                            • The drop target options

                            interface DropTargetMonitor

                            interface DropTargetMonitor<DragObject = unknown, DropResult = unknown>
                            extends HandlerManager,
                            MonitorEventEmitter {}

                              method canDrop

                              canDrop: () => boolean;
                              • Returns true if there is a drag operation in progress, and the owner's canDrop() returns true or is not defined.

                              method didDrop

                              didDrop: () => boolean;
                              • Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside drop() to test whether any nested drop target has already handled the drop. Returns false if called outside drop().

                              method getClientOffset

                              getClientOffset: () => XYCoord | null;
                              • Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

                              method getDifferenceFromInitialOffset

                              getDifferenceFromInitialOffset: () => XYCoord | null;
                              • Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns null if no item is being dragged.

                              method getDropResult

                              getDropResult: <T = DropResult>() => T | null;
                              • Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop() overrides the drop result previously set by the child. Returns null if called outside drop().

                              method getInitialClientOffset

                              getInitialClientOffset: () => XYCoord | null;
                              • Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

                              method getInitialSourceClientOffset

                              getInitialSourceClientOffset: () => XYCoord | null;
                              • Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

                              method getItem

                              getItem: <T = DragObject>() => T;
                              • Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

                              method getItemType

                              getItemType: () => Identifier | null;
                              • Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

                              method getSourceClientOffset

                              getSourceClientOffset: () => XYCoord | null;
                              • Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

                              method isOver

                              isOver: (options?: { shallow?: boolean }) => boolean;
                              • Returns true if there is a drag operation in progress, and the pointer is currently hovering over the owner. You may optionally pass { shallow: true } to strictly check whether only the owner is being hovered, as opposed to a nested target.

                              interface DropTargetSpec

                              interface DropTargetSpec<Props, DragObject = any, DropResult = any> {}
                              • Interface for the DropTarget specification object

                              property canDrop

                              canDrop?: (
                              props: Props,
                              monitor: DropTargetMonitor<DragObject, DropResult>
                              ) => boolean;
                              • Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.

                              property drop

                              drop?: (
                              props: Props,
                              monitor: DropTargetMonitor<DragObject, DropResult>,
                              component: any
                              ) => DropResult | undefined;
                              • Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop() is defined and returns false.

                              property hover

                              hover?: (
                              props: Props,
                              monitor: DropTargetMonitor<DragObject, DropResult>,
                              component: any
                              ) => void;
                              • Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.

                              interface HandlerManager

                              interface HandlerManager {}

                                property getHandlerId

                                getHandlerId: () => Identifier | null;

                                  property receiveHandlerId

                                  receiveHandlerId: (handlerId: Identifier | null) => void;

                                    interface MonitorEventEmitter

                                    interface MonitorEventEmitter {}

                                      method subscribeToStateChange

                                      subscribeToStateChange: (
                                      fn: () => void,
                                      options?: { handlerIds?: Identifier[] }
                                      ) => any;

                                        interface XYCoord

                                        interface XYCoord {}

                                          property x

                                          x: number;

                                            property y

                                            y: number;

                                              Type Aliases

                                              type ConnectableElement

                                              type ConnectableElement = RefObject<any> | ReactElement | Element | null;

                                                type ConnectDragPreview

                                                type ConnectDragPreview = DragElementWrapper<DragPreviewOptions>;

                                                  type ConnectDragSource

                                                  type ConnectDragSource = DragElementWrapper<DragSourceOptions>;

                                                    type ConnectDropTarget

                                                    type ConnectDropTarget = DragElementWrapper<any>;

                                                      type DndComponentClass

                                                      type DndComponentClass<C extends ComponentType<any>, P> = ComponentClass<
                                                      JSX.LibraryManagedAttributes<C, P>
                                                      > &
                                                      NonReactStatics<C> & {
                                                      DecoratedComponent: C;
                                                      };

                                                        type DndComponentEnhancer

                                                        type DndComponentEnhancer<CollectedProps> = <
                                                        C extends ComponentType<Matching<CollectedProps, GetProps<C>>>
                                                        >(
                                                        component: C
                                                        ) => DndComponentClass<
                                                        C,
                                                        Omit<GetProps<C>, keyof Shared<CollectedProps, GetProps<C>>>
                                                        >;

                                                          type DndProviderProps

                                                          type DndProviderProps<BackendContext, BackendOptions> =
                                                          | {
                                                          manager: DragDropManager;
                                                          }
                                                          | {
                                                          backend: BackendFactory;
                                                          context?: BackendContext;
                                                          options?: BackendOptions;
                                                          debugMode?: boolean;
                                                          };

                                                            type DragElementWrapper

                                                            type DragElementWrapper<Options> = (
                                                            elementOrNode: ConnectableElement,
                                                            options?: Options
                                                            ) => ReactElement | null;

                                                              type DragLayerCollector

                                                              type DragLayerCollector<TargetProps, CollectedProps> = (
                                                              monitor: DragLayerMonitor,
                                                              props: TargetProps
                                                              ) => CollectedProps;

                                                                type DragObjectFactory

                                                                type DragObjectFactory<T> = (monitor: DragSourceMonitor<T>) => T | null;

                                                                  type DragSourceCollector

                                                                  type DragSourceCollector<CollectedProps, TargetProps> = (
                                                                  connect: DragSourceConnector,
                                                                  monitor: DragSourceMonitor,
                                                                  props: TargetProps
                                                                  ) => CollectedProps;

                                                                    type DropTargetCollector

                                                                    type DropTargetCollector<CollectedProps, TargetProps> = (
                                                                    connect: DropTargetConnector,
                                                                    monitor: DropTargetMonitor,
                                                                    props: TargetProps
                                                                    ) => CollectedProps;

                                                                      type DropTargetOptions

                                                                      type DropTargetOptions = any;

                                                                        type FactoryOrInstance

                                                                        type FactoryOrInstance<T> = T | (() => T);

                                                                          type GetProps

                                                                          type GetProps<C> = C extends ComponentType<infer P> ? P : never;
                                                                          • Gets the props interface of a component using inference

                                                                          type Matching

                                                                          type Matching<InjectedProps, DecorationTargetProps> = {
                                                                          [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
                                                                          ? InjectedProps[P] extends DecorationTargetProps[P]
                                                                          ? DecorationTargetProps[P]
                                                                          : InjectedProps[P]
                                                                          : DecorationTargetProps[P];
                                                                          };
                                                                          • A property P will be present if: - it is present in DecorationTargetProps

                                                                            Its value will be dependent on the following conditions - if property P is present in InjectedProps and its definition extends the definition in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P] - if property P is not present in InjectedProps then its definition will be that of DecorationTargetProps[P] - if property P is present in InjectedProps but does not extend the DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]

                                                                          type Omit

                                                                          type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

                                                                            type Shared

                                                                            type Shared<InjectedProps, DecorationTargetProps> = {
                                                                            [P in Extract<
                                                                            keyof InjectedProps,
                                                                            keyof DecorationTargetProps
                                                                            >]?: InjectedProps[P] extends DecorationTargetProps[P]
                                                                            ? DecorationTargetProps[P]
                                                                            : never;
                                                                            };
                                                                            • a property P will be present if : - it is present in both DecorationTargetProps and InjectedProps - InjectedProps[P] can satisfy DecorationTargetProps[P] ie: decorated component can accept more types than decorator is injecting

                                                                              For decoration, inject props or ownProps are all optionally required by the decorated (right hand side) component. But any property required by the decorated component must be satisfied by the injected property.

                                                                            Package Files (16)

                                                                            Dependencies (5)

                                                                            Dev Dependencies (11)

                                                                            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-dnd.

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