# react-dnd-preview

> Preview component for React DnD

Latest version **9.0.0** (published 2025-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dnd-preview
pnpm add react-dnd-preview
yarn add react-dnd-preview
bun add react-dnd-preview
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 9.0.0 |
| Published | 2025-01-27 |
| First published | 2017-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 210 |
| Author | Louis Brunner |
| Maintainers | louisbrunner |
| Keywords | react, dnd, drag, drop, react-dnd, preview |

## Links

- npm: https://www.npmjs.com/package/react-dnd-preview
- Repository: https://github.com/LouisBrunner/dnd-multi-backend
- Homepage: https://louisbrunner.github.io/dnd-multi-backend/packages/react-dnd-preview/
- Issues: https://github.com/LouisBrunner/dnd-multi-backend/issues
- Funding: https://github.com/sponsors/LouisBrunner
- npm.io page: https://npm.io/package/react-dnd-preview

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 9.0.0 (latest) — 2025-01-27
- 9.0.1-rc0001 (next) — 2025-06-16
- 9.0.0-rc0001 — 2024-12-20
- 8.1.2 — 2024-12-14
- 8.1.1 — 2024-12-12
- 8.1.0 — 2024-12-12
- 8.0.3 — 2023-09-21
- 8.0.1 — 2023-06-07
- 8.0.0 — 2022-12-13
- 8.0.0-alpha.1 — 2022-12-10
- 7.1.3 — 2022-12-08
- 8.0.0-alpha.0 — 2022-12-06
- 7.1.2 — 2022-12-06
- 7.1.1 — 2022-08-31
- 7.1.0 — 2022-08-31
- … 35 more at https://npm.io/package/react-dnd-preview/versions

## README

# React DnD Preview [![NPM Version][npm-image]][npm-url] [![dependencies Status][deps-image]][deps-url] [![devDependencies Status][deps-dev-image]][deps-dev-url]

[Try it here!](https://louisbrunner.github.io/dnd-multi-backend/examples/react-dnd-preview.html)

This project is a React component compatible with [React DnD](https://github.com/react-dnd/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](#migrating) for instructions when switching from `4.x.x` or `6.x.x`.

## Installation

```sh
npm install -S 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 different ways: hook-based, function-based and context-based.
All of them receive the same data formatted the same way, an object containing the following properties:

 - `display`: only with `usePreview`, boolean indicating if you should render your preview
 - `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 the `style` property of your preview component
 - `ref`: a reference which can be passed to the final component that will use `style`, it will allow `Preview` to position the previewed component correctly (closer to what HTML5 DnD can do)
 - `monitor`: the actual [`DragLayerMonitor`](https://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor) from `react-dnd`

The function needs to return something that React can render (React component, `null`, etc).

See also the [examples](examples/) for more information.

### Hook-based

```js
import { usePreview } from 'react-dnd-preview'

const MyPreview = () => {
  const preview = usePreview({ placement: 'top', padding: {x: -20, y: 0 }})
  if (!preview.display) {
    return null
  }
  const {itemType, item, style, ref} = preview;
  return <div className="item-list__item" ref={ref} style={style}>{itemType}</div>
}

const App = () => {
  return (
    <DndProvider backend={MyBackend}>
      <ItemList />
      <MyPreview />
    </DndProvider>
  )
}
```

### Function-based

```js
import { Preview } from 'react-dnd-preview'

const generatePreview = ({itemType, item, style}) => {
  return <div className="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

```js
import { Preview, Context } from 'react-dnd-preview'

const MyPreview = () => {
  const {itemType, item, style} = useContext(Preview.Component)
  return <div className="item-list__item" style={style}>{itemType}</div>
}

const App = () => {
  return (
    <DndProvider backend={MyBackend}>
      <ItemList />
      <Preview>
        <MyPreview />
        // or
        <Context.Consumer>
          {({itemType, item, style}) => <div className="item-list__item" style={style}>{itemType}</div>}
        </Context.Consumer>
      </Preview>
    </DndProvider>
  )
}
```

## Migrating

### Migrating from 6.x.x

Starting with `7.0.0`, `react-dnd-preview` doesn't have a default export anymore.

Previously:
```js
import Preview from 'react-dnd-preview'
```

Now:
```js
import { Preview } from 'react-dnd-preview'
```

### 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-2022 Louis Brunner



[npm-image]: https://img.shields.io/npm/v/react-dnd-preview.svg
[npm-url]: https://npmjs.org/package/react-dnd-preview
[deps-image]: https://david-dm.org/louisbrunner/react-dnd-preview/status.svg
[deps-url]: https://david-dm.org/louisbrunner/react-dnd-preview
[deps-dev-image]: https://david-dm.org/louisbrunner/react-dnd-preview/dev-status.svg
[deps-dev-url]: https://david-dm.org/louisbrunner/react-dnd-preview?type=dev

---
_Source: https://npm.io/package/react-dnd-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._