{"id":11691,"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.","status":"active","version":"9.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/LouisBrunner/dnd-multi-backend","tags":["javascript","react","dnd","drag","drop","react-dnd","preview","typescript"],"install":[{"cmd":"npm install react-dnd-preview","lang":"bash","label":"npm"},{"cmd":"yarn add react-dnd-preview","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dnd-preview","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Core peer dependency for drag-and-drop functionality.","package":"react-dnd","optional":false},{"reason":"May be required as an explicit dependency for some installations since v8.0.2.","package":"dnd-core","optional":true}],"imports":[{"note":"The library is ESM-only since v8.0.0. Use named imports for components.","wrong":"const Preview = require('react-dnd-preview');","symbol":"Preview","correct":"import { Preview } from 'react-dnd-preview';"},{"note":"A custom hook for advanced preview logic. It's a named export, not a default.","wrong":"import usePreview from 'react-dnd-preview';","symbol":"usePreview","correct":"import { usePreview } from 'react-dnd-preview';"},{"note":"Type import for the preview generator function signature.","symbol":"PreviewGenerator","correct":"import type { PreviewGenerator } from 'react-dnd-preview';"}],"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`."},"warnings":[{"fix":"Upgrade your React installation to v19 or compatible version. If you are not ready for React v19, stick to `react-dnd-preview` v8.x.","message":"Version 9.0.0 introduces support for React v19. While no explicit breaking changes are noted for `react-dnd-preview` itself, ensure your `react` peer dependency aligns with v19 if upgrading, as this is a major ecosystem shift.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Migrate your import statements to ES Modules syntax (e.g., `import { Preview } from 'react-dnd-preview';`). Ensure your project's build system supports ESM.","message":"Version 8.0.0 dropped support for CommonJS and UMD builds, making the library ESM-only. Direct `require()` statements will no longer work and will result in runtime errors.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Update `react-dnd` to `^16.0.1` or higher. Upgrade your Node.js runtime to at least v16.","message":"Version 8.0.0 also upgraded `react-dnd` to `16.0.1` and dropped support for Node.js 14. Ensure your project's `react-dnd` version is compatible and your Node.js environment is v16 or higher.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"If you encounter errors related to `dnd-core` not being found, install it: `npm install dnd-core` or `yarn add dnd-core`.","message":"Starting with version 8.0.2, you might need to explicitly add `dnd-core` as a dependency in your project, even though it's typically an indirect dependency of `react-dnd`.","severity":"gotcha","affected_versions":">=8.0.2"},{"fix":"Utilize the `placement` prop (e.g., `<Preview generator={generatePreview} placement=\"top left\" />`) to control the preview's position relative to the cursor or origin.","message":"The `Preview` component allows changing its placement via a `placement` prop since v8.1.0, enabling more flexible positioning than the default mouse tracking.","severity":"gotcha","affected_versions":">=8.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your import statements to use ES Modules syntax: `import { Preview } from 'react-dnd-preview';` and ensure your bundler (Webpack, Rollup, Vite) is configured for ESM.","cause":"Attempting to use CommonJS `require()` syntax with `react-dnd-preview` in a project that doesn't transpile it, after the library became ESM-only in v8.0.0.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-dnd-preview/dist/index.js from ... not supported."},{"fix":"Ensure that `react-dnd`'s `DndProvider` is wrapping your components, and that `react-dnd-preview`'s `Preview` component is rendered within it. Verify your `generator` function handles all expected item types and states correctly.","cause":"This error often indicates that `react-dnd-preview` is trying to access drag monitor state before a drag operation has properly begun or after it has ended, or if the DndProvider is not correctly set up.","error":"TypeError: Cannot read properties of undefined (reading 'currentOffset')"},{"fix":"Ensure `react-dnd-preview` is installed correctly and your `tsconfig.json` includes `node_modules` in its `typeRoots` or `types` configuration. Sometimes, a simple reinstall (`npm install react-dnd-preview`) or IDE restart helps.","cause":"TypeScript cannot locate the type definitions for the `react-dnd-preview` package.","error":"TS2307: Cannot find module 'react-dnd-preview' or its corresponding type declarations."}],"ecosystem":"npm"}