How to use @react-dnd/invariant - 9 common examples

public getDecoratedComponentInstance() {
			invariant(
				this.decoratedRef.current,
				'In order to access an instance of the decorated component, it must either be a class component or use React.forwardRef()',
			)
			return this.decoratedRef.current as any
		}

)
	let getType: (props: RequiredProps) => TargetType = type as (
		props: RequiredProps,
	) => TargetType
	if (typeof type !== 'function') {
		invariant(
			isValidType(type, true),
			'Expected "type" provided as the first argument to DropTarget to be ' +
				'a string, an array of strings, or a function that returns either given ' +
				'the current props. Instead, received %s. ' +
				'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
			type,
		)
		getType = () => type
	}
	invariant(
		isPlainObject(spec),
		'Expected "spec" provided as the second argument to DropTarget to be ' +
			'a plain object. Instead, received %s. ' +
			'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
		spec,
	)
	const createTarget = createTargetFactory(spec)
	invariant(
		typeof collect === 'function',
		'Expected "collect" provided as the third argument to DropTarget to be ' +
			'a function that returns a plain object of props to inject. ' +
			'Instead, received %s. ' +
			'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
		collect,
	)
	invariant(

isPlainObject(spec),
		'Expected "spec" provided as the second argument to DropTarget to be ' +
			'a plain object. Instead, received %s. ' +
			'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
		spec,
	)
	const createTarget = createTargetFactory(spec)
	invariant(
		typeof collect === 'function',
		'Expected "collect" provided as the third argument to DropTarget to be ' +
			'a function that returns a plain object of props to inject. ' +
			'Instead, received %s. ' +
			'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
		collect,
	)
	invariant(
		isPlainObject(options),
		'Expected "options" provided as the fourth argument to DropTarget to be ' +
			'a plain object when specified. ' +
			'Instead, received %s. ' +
			'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target',
		collect,
	)

	return (function decorateTarget<
		ComponentType extends React.ComponentType
	>(DecoratedComponent: ComponentType): DndComponent {
		return decorateHandler({
			containerDisplayName: 'DropTarget',
			createHandler: createTarget as any,
			registerHandler: registerTarget,
			createMonitor: (manager: DragDropManager) =>

function verifyIsDragging(monitor: DragDropMonitor) {
	invariant(monitor.isDragging(), 'Cannot call endDrag while not dragging.')
}

export function validateTargetContract(target: DropTarget) {
	invariant(
		typeof target.canDrop === 'function',
		'Expected canDrop to be a function.',
	)
	invariant(
		typeof target.hover === 'function',
		'Expected hover to be a function.',
	)
	invariant(
		typeof target.drop === 'function',
		'Expected beginDrag to be a function.',
	)
}

function checkInvariants(
	targetIds: string[],
	monitor: DragDropMonitor,
	registry: HandlerRegistry,
) {
	invariant(monitor.isDragging(), 'Cannot call hover while not dragging.')
	invariant(!monitor.didDrop(), 'Cannot call hover after drop.')
	for (let i = 0; i < targetIds.length; i++) {
		const targetId = targetIds[i]
		invariant(
			targetIds.lastIndexOf(targetId) === i,
			'Expected targetIds to be unique in the passed array.',
		)

		const target = registry.getTarget(targetId)
		invariant(target, 'Expected targetIds to be registered.')
	}
}

function verifyGetSourceClientOffsetIsFunction(getSourceClientOffset: any) {
	invariant(
		typeof getSourceClientOffset === 'function',
		'When clientOffset is provided, getSourceClientOffset must be a function.',
	)
}

private receiveDragDropManager(dragDropManager?: DragDropManager) {
			if (this.manager !== undefined) {
				return
			}

			invariant(
				dragDropManager !== undefined,
				'Could not find the drag and drop manager in the context of %s. ' +
					'Make sure to render a DndProvider component in your top-level component. ' +
					'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#could-not-find-the-drag-and-drop-manager-in-the-context',
				displayName,
				displayName,
			)
			if (dragDropManager === undefined) {
				return
			}

			this.manager = dragDropManager
			this.handlerMonitor = createMonitor(dragDropManager)
			this.handlerConnector = createConnector(dragDropManager.getBackend())
			this.handler = createHandler(this.handlerMonitor, this.decoratedRef)
		}

function parseRoleFromHandlerId(handlerId: string) {
	switch (handlerId[0]) {
		case 'S':
			return HandlerRole.SOURCE
		case 'T':
			return HandlerRole.TARGET
		default:
			invariant(false, `Cannot parse handler ID: ${handlerId}`)
	}
}