# react-dnd-text-dragpreview

> Textual drag preview for react-dnd drag and drop

Latest version **0.2.3** (published 2016-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dnd-text-dragpreview
pnpm add react-dnd-text-dragpreview
yarn add react-dnd-text-dragpreview
bun add react-dnd-text-dragpreview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2016-01-07 |
| First published | 2016-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | jaketrent |
| Maintainers | jaketrent |
| Keywords | react, react-dnd, drag, and, drog, drag, preview |

## Links

- npm: https://www.npmjs.com/package/react-dnd-text-dragpreview
- Repository: https://github.com/jaketrent/react-dnd-text-dragpreview
- Homepage: https://github.com/jaketrent/react-dnd-text-dragpreview#readme
- Issues: https://github.com/jaketrent/react-dnd-text-dragpreview/issues
- npm.io page: https://npm.io/package/react-dnd-text-dragpreview

## 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

- 0.2.3 (latest) — 2016-01-07
- 0.2.2 — 2016-01-07
- 0.2.1 — 2016-01-06
- 0.2.0 — 2016-01-06
- 0.1.0 — 2016-01-06
- 0.0.1 — 2016-01-06

## README

# react-dnd-text-dragpreview

react-dnd allows you to use an image for a drag preview.  In order to get text as a drag preview, you have to write text to a canvas and export an image.  This library wraps up the canvas interaction.

![text drag preview in action](http://i.imgur.com/glegZVc.gif)

## Install

```
npm install react-dnd-text-dragpreview --save-dev
```

## Usage

```js
import { createDragPreview } from 'react-dnd-text-dragpreview'

const styles = {
  fontSize: '12px'
}

const dragPreviewImage = createDragPreview('Custom Drag Text', styles)
```

### Style Configuration

There are several styling options.  These styles look like react inline styles according to naming convention, but only this set are currently available (not all inline styles options).

These are the default styles that you can override via the 2nd argument to `createDragPreview`:

```js
{
  backgroundColor: '#efefef',
  borderColor: '#1a1a1a',
  color: '#1a1a1a',
  fontSize: 14,
  paddingTop: 5,
  paddingRight: 5,
  paddingBottom: 5,
  paddingLeft: 5
}
```

## React Usage

In React, you're going to be using a dragPreview for `react-dnd` within a component.

Here's a demo component that uses `react-dnd`, `TableRow`, which will show a drag preview of "Moving X rows" when dragging.  See comments inline for relevant pieces:

```js
import { DragSource } from 'react-dnd';
import React from 'react'
import { createDragPreview } from 'react-dnd-text-dragpreview'

import { ItemTypes } from './constants'

const { bool, func, number, object, string } = React.PropTypes

// overrides dragPreview style
var dragPreviewStyle = {
  backgroundColor: 'rgb(68, 67, 67)',
  borderColor: '#F96816',
  color: 'white',
  fontSize: 15,
  paddingTop: 4,
  paddingRight: 7,
  paddingBottom: 6,
  paddingLeft: 7
}

const rowSource = {
  beginDrag(props) {
    if (typeof props.onDragRow === 'function')
      props.onDragRow(props.dataId)

    return {
      dataId: props.dataId
    }
  }
}

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview()
  }
}

// provides custom message for dragPreview
function formatDragMessage(numRows) {
  const noun = numRows === 1 ? 'row' : 'rows'
  return `Moving ${num} ${noun}`
}

class TableRow extends React.Component {
  componentDidMount() {
    // handles first time dragPreview setup
    this.dragPreview = createDragPreview(formatDragMessage(this.props.numRows), dragPreviewStyle)
    this.props.connectDragPreview(this.dragPreview)
  }
  componentDidUpdate(prevProps) {
    // handles updates to the dragPreview image as the dynamic numRows value changes
    this.dragPreview = createDragPreview(formatDragMessage(this.props.numRows), dragPreviewStyle, this.dragPreview)
  }
  render() {
    return this.props.connectDragSource(
      <tr>
        <td className={this.props.css.checkBoxCell}>
          Drag me
        </td>
      </tr>
    )
  }
}

TableRow.propTypes = {
  connectDragPreview: func.isRequired,
  connectDragSource: func.isRequired,
  dataId: string.isRequired,
  numRows: number.isRequired,
  onDragRow: func.isRequired
}

export default DragSource(ItemTypes.ROW, rowSource, collect)(TableRow)
```

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