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
.
npm install react-dnd-preview
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:
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 componentThe function needs to return something that React can render (React
component, null
, etc).
See also the examples for more information.
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>
;
)
} }
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>
, item, style}) => return <div class="item-list__item" style={style}>{itemType}</div>;}
{({itemType</Context.Consumer>
</Preview>
</DndProvider>
;
); }
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.
MIT, Copyright (c) 2016-2020 Louis Brunner