dnd-multi-backend

React DnD Preview

This project is a React component compatible with React DnD that can be used to emulate a Drag’n’Drop “ghost” when a Backend system doesn’t have one (e.g. react-dnd-touch-backend).

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

Installation

npm install -S react-dnd-preview

Usage & Example

Just include the Preview component close to the top component of your application (it places itself absolutely).

It is usable in different ways: hook-based, function-based and context-based. All of them receive the same data formatted the same way, an object containing the following properties:

display: only with usePreview, boolean indicating if you should render your preview
itemType: the type of the item (monitor.getItemType())
item: the item (monitor.getItem())
style: an object representing the style (used for positioning), it should be passed to the style property of your preview component
ref: a reference which can be passed to the final component that will use style, it will allow Preview to position the previewed component correctly (closer to what HTML5 DnD can do)
monitor: the actual DragLayerMonitor from react-dnd

The function needs to return something that React can render (React component, null, etc).

See also the examples for more information.

Hook-based

import { usePreview } from 'react-dnd-preview'

const MyPreview = () => {
  const preview = usePreview({ placement: 'top', padding: {x: -20, y: 0 }})
  if (!preview.display) {
    return null
  }
  const {itemType, item, style, ref} = preview;
  return <div className="item-list__item" ref={ref} style={style}>{itemType}</div>
}

const App = () => {
  return (
    <DndProvider backend={MyBackend}>
      <ItemList />
      <MyPreview />
    </DndProvider>
  )
}

Function-based

import { Preview } from 'react-dnd-preview'

const generatePreview = ({itemType, item, style}) => {
  return <div className="item-list__item" style={style}>{itemType}</div>
}

class App extends React.Component {
  render() {
    return (
      <DndProvider backend={MyBackend}>
        <ItemList />
        <Preview generator={generatePreview} />
        // or
        <Preview>{generatePreview}</Preview>
      </DndProvider>
    )
  }
}

Context-based

import { Preview, Context } from 'react-dnd-preview'

const MyPreview = () => {
  const {itemType, item, style} = useContext(Preview.Component)
  return <div className="item-list__item" style={style}>{itemType}</div>
}

const App = () => {
  return (
    <DndProvider backend={MyBackend}>
      <ItemList />
      <Preview>
        <MyPreview />
        // or
        <Context.Consumer>
          {({itemType, item, style}) => <div className="item-list__item" style={style}>{itemType}</div>}
        </Context.Consumer>
      </Preview>
    </DndProvider>
  )
}

Migrating

Migrating from 6.x.x

Starting with 7.0.0, react-dnd-preview doesn’t have a default export anymore.

Previously:

import Preview from 'react-dnd-preview'

Now:

import { Preview } from 'react-dnd-preview'

Migrating from 4.x.x

Starting with 5.0.0, react-dnd-preview will start passing its arguments packed in one argument, an object {itemType, item, style}, instead of 3 different arguments (itemType, item and style). This means that will need to change your generator function to receive arguments correctly.

License

This site is open source. Improve this page.