React DnD Preview NPM Version dependencies Status devDependencies Status

Try it here!

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.

Installation

npm install 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 two different ways: function-based and context-based. Both of them receive the same data formatted the same way, an object containing 3 properties:

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

See also the examples for more information.

Function-based

  import Preview from 'react-dnd-preview';

  const generatePreview = ({itemType, item, style}) => {
    return <div class="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 class="item-list__item" style={style}>{itemType}</div>;
  };

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

Migrating

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

MIT, Copyright (c) 2016-2020 Louis Brunner