React-dnd: How to resize a preview based on the real dragged element?

Look into the documentation for DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Hey I have a similar issue - want to give an image for the drag preview and react dnd is making it too big - I tried setting the image size with width/height and style.w/h before passing to connectDragPreview with no effect. Have combed the documentation & couldn't find any mention of resizing the preview image. The actual html element that displays the image in this case is buried deep down in a library component so that's not easily accessible either, so the most straightforward solution would be if connectDragPreview/dragPreview could expose a resizing option (or even better honor the sizing of the image passed in).

here's some non-working code - setting the image width & height has no effect, either in the onload function or in the setDragImage function:

componentDidMount = () => {
this.setDragImage();
};

componentDidUpdate = () => {
this.setDragImage();
};

setDragImage = () => {
const image = new Image();
image.src = this.props.imgUrl;
image.onload = () => {
image.width = image.height = 35;
this.props.connectDragPreview(image);
}
};

Any update on this issue?

You can achieve that over the monitor item.

In the DragSource spec in beginDrag which is used to define the monitor item you get react component instance as the third argument and add it to the item. Later on, by using findDOMNode you can get actual node.

So, first add the component instance to the item.

  beginDrag({ id }, monitor, component) {
    return {
      id,
      component
    };
  },

Later in the DragLayer you require the item.

const CustomDragLayer = DragLayer(monitor => ({
  item: monitor.getItem(),
  isDragging: monitor.isDragging() // useful
}))(CustomDragLayer);

Now in CustomDragLayer props you will receive item which will have component.

class CustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.width;
    this.height;

    // Now you can eacily get height or width from node 
    const node = findDOMNode(props.item.component);
    console.log(node.clientWidth);
  }
...

Notice how findDOMNode is in the constructor, it may not be used in the render and in most cases there is no actual need, Drag Source probably has static size.

@MrBr, thanks it's working.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.