{"library":"react-dnd-preview","title":"React DnD Preview Component","description":"react-dnd-preview is a dedicated component for creating drag-and-drop previews within applications utilizing React DnD. It simplifies the implementation of visual feedback during drag operations by providing a component that renders the dragged item at the current mouse position. The current stable version is 9.0.0, which includes support for React v19. Releases typically follow the React and React DnD release cycles for major versions, with minor and patch updates for bug fixes and dependency bumps occurring more frequently. Its key differentiator is its tight integration with the React DnD ecosystem, offering a straightforward way to add preview functionality without complex manual DOM manipulation, making it an essential companion for sophisticated drag-and-drop UIs.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-dnd-preview"],"cli":null},"imports":["import { Preview } from 'react-dnd-preview';","import { usePreview } from 'react-dnd-preview';","import type { PreviewGenerator } from 'react-dnd-preview';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { useDrag } from 'react-dnd';\nimport { Preview } from 'react-dnd-preview';\n\nconst DraggableBox: React.FC = () => {\n  const [{ isDragging }, drag] = useDrag(() => ({\n    type: 'BOX',\n    item: { id: 'some-item' },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging()\n    })\n  }));\n\n  return (\n    <div\n      ref={drag}\n      style={{\n        opacity: isDragging ? 0.5 : 1,\n        cursor: 'move',\n        width: '100px',\n        height: '100px',\n        border: '1px solid black',\n        backgroundColor: 'lightblue',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center'\n      }}\n    >\n      Drag Me\n    </div>\n  );\n};\n\nconst generatePreview = ({ itemType, item, style }) => {\n  if (itemType === 'BOX') {\n    return (\n      <div style={{ ...style, backgroundColor: 'orange', padding: '10px', borderRadius: '5px' }}>\n        Previewing {item.id}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst App: React.FC = () => {\n  return (\n    <DndProvider backend={HTML5Backend}>\n      <div style={{ padding: '20px' }}>\n        <h1>React DnD Preview Example</h1>\n        <DraggableBox />\n        <Preview generator={generatePreview} />\n      </div>\n    </DndProvider>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates a basic draggable box with a custom preview generated by `react-dnd-preview`, using `DndProvider` and `HTML5Backend`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}