Starting with the Chessboard Example example, the Knight component is decalred as
export const Knight = () => {
const [{ isDragging }, drag, preview] = useDrag(() => ({
type: ItemTypes.KNIGHT,
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}), []);
return (<>
<DragPreviewImage connect={preview} src={knightImage}/>
<div ref={drag} style={{
...knightStyle,
opacity: isDragging ? 0.5 : 1,
}}>
♘
</div>
</>);
};
However the image is larger than the board squares. How would I go and resize that preview image for that example without resizing the source image iteslf?
