@ehrocks/forked-react-dnd-preview
v6.0.2-alpha.10
Published
Preview component for React DnD
Downloads
12
Readme
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
.
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:
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 thestyle
property of your preview component
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 {display, itemType, item, style} = usePreview();
if (!display) {
return null;
}
return <div class="item-list__item" 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 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}) => <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