React DnD: HTML5 to Touch Pipeline

Try it here!

This project is a Drag'n'Drop backend pipeline compatible with React DnD Multi Backend. It cannot be used standalone.

This pipeline starts by using the React DnD HTML5 Backend, but switches to the React DnD Touch Backend if a touch event is triggered. You application can smoothly use the nice HTML5 compatible backend and fallback on the Touch one on mobile devices!

See the migration section for instructions when switching from 6.x.x.

Installation

npm install -S rdndmb-html5-to-touch

You can then import the pipeline using import { HTML5toTouch } from 'rdndmb-html5-to-touch'.

Usage

This package should be used with react-dnd-multi-backend.

import { DndProvider } from 'react-dnd-multi-backend'
import { HTML5toTouch } from 'rdndmb-html5-to-touch'

const App = () => {
  return (
    <DndProvider options={HTML5toTouch}>
      <Example />
    </DndProvider>
  )
}

Examples

You can see an example here.

Migrating

Migrating from 6.x.x and earlier

HTML5toTouch used to be provided as part of react-dnd-multi-backend which made importing different builds (commonjs vs esm) more difficult. It also used to be a default export.

Previously:

import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch'
// or
import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch'

Now:

import { HTML5toTouch } from 'rdndmb-html5-to-touch'

License

MIT, Copyright (c) 2021-2022 Louis Brunner