# react-drag-to-select

> A react library which adds drag to select to your app

Latest version **1.0.3-rc01** (published 2021-07-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-drag-to-select
pnpm add react-drag-to-select
yarn add react-drag-to-select
bun add react-drag-to-select
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3-rc01 |
| Published | 2021-07-28 |
| First published | 2020-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 378.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 194 |
| Author | Air |
| Maintainers | tomasz_czura |

## Links

- npm: https://www.npmjs.com/package/react-drag-to-select
- Repository: https://github.com/AirLabsTeam/react-drag-to-select
- Homepage: https://github.com/AirLabsTeam/react-drag-to-select#readme
- Issues: https://github.com/AirLabsTeam/react-drag-to-select/issues
- npm.io page: https://npm.io/package/react-drag-to-select

## Recent versions

- 1.0.3-rc01 (latest) — 2021-07-28
- 1.0.2 — 2021-05-21
- 1.0.1 — 2020-12-17
- 1.0.0 — 2020-12-17

## README

# react-drag-to-select

> A react library which adds drag to select to your app

[![NPM](https://img.shields.io/npm/v/react-drag-to-select.svg)](https://www.npmjs.com/package/react-drag-to-select) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-drag-to-select
```

## Usage

![Example](example/assets/chrome-capture.gif)

```tsx

const App = () => {

  const handleSelectionChange = useCallback((box: Box) => {
    console.log(box);
  },[])

  const { DragSelection } = useSelectionContainer({
    onSelectionChange,
  });

  return (
    <div id='root'>
      <DragSelection/>
      <div>Selectable element</div>
    </div>
  )
}

```

1. Add `useSelectionContainer` hook to your component and pass `onSelectionChange` handler
2. Render `<DragSelection/>` somewhere in code
3. That's it! Mouse selection will appear, when you click and drag within window or element passed in `eventsElement`.

This library will not select your items. You have to handle selection yourself in `onSelectionChange` method (see example). You can use `boxesIntersects(boxA, boxB)` method to check if element intersetcs with selection.


## useSelectionContainer arguments

|Name|Required|Type|Default|Description|
|----|--------|----|-------|-----------|
|onSelectionStart|No|() => void||Method called when selection starts (mouse is down and moved)|
|onSelectionEnd|No|() => void||Method called when selection ends (mouse is up)
|onSelectionChange|Yes|(box: Box) => void||Method called when selection moves|
|isEnabled|No|boolean|true|If false, selection does not fire|
|eventsElement|No|Window, HTMLElement or null|window|Element to listen mouse events|
|selectionProps|No|React.HTMLAttributes||Props of selection - you can pass style here as shown below|

## Selection styling

To style your selection, pass `selectionProps: { style }` prop:

```tsx
  const { DragSelection } = useSelectionContainer({
    ...,
    selectionProps: {
      style: {
        border: '2px dashed purple',
        borderRadius: 4,
        backgroundColor: 'brown',
        opacity: 0.5,
      },
    },
  });
```

The default style is
```
{
  border: '1px solid #4C85D8',
  background: 'rgba(155, 193, 239, 0.4)',
  position: `absolute`,
  zIndex: 99,
}
```

## Working with draggable elements

If you use any drag-n-drop library (like `react-dnd` or `react-beautiful-dnd`), you may want to not start selection when user starts dragging an element.
To prevent this, add `data-draggable=true` to your element - selection won't be started if user clicks and drags this element or its children:

```html
<div data-draggable=true>
...
</div>
```

## Used by

- [<img src="./example/assets/airLogo.png" width="50"/>](https://air.inc/home)

## License

MIT © [Air](https://github.com/AirLabsTeam)

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