A small wrapper around React DnD’s provider that switches to a touch backend as soon as a touch event is detected.

DndProviderWrapper.jsx

// This is a small wrapper around React DnD’s provider that switches to a touch
// backend as soon as a touch event is detected.
import { useEffect, useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const TOUCH_EVENTS = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
function DndProviderWrapper({ children }) {
	const [dndProps, setDndProps] = useState({ backend: HTML5Backend });

	// If the user triggers a touch event, it means they are using their
	// touchscreen. This is better than checking if the device supports touch
	// events, because the user may still prefer to use a mouse.
	useEffect(() => {
		function touchHandler() {
			removeHandlers();
			import('react-dnd-touch-backend').then(({ TouchBackend }) => {
				setDndProps({
					backend: TouchBackend,
					options: {
						enableMouseEvents: true,
					},
				});
			});
		}
		TOUCH_EVENTS.forEach(touchEvent => {
			document.addEventListener(touchEvent, touchHandler, { once: true, passive: true });
		});
		function removeHandlers() {
			TOUCH_EVENTS.forEach(touchEvent => {
				document.removeEventListener(touchEvent, touchHandler);
			});
		}
		return removeHandlers;
	}, []);

	return <DndProvider {...dndProps}>{children}</DndProvider>;
}

export default DndProviderWrapper;