# react-dragline

> Guide lines and magnetic adsorption to better align draggable elements in React

Latest version **1.1.0** (published 2022-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dragline
pnpm add react-dragline
yarn add react-dragline
bun add react-dragline
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-06-19 |
| First published | 2019-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 740 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Huang NuNu |
| Maintainers | huangdehao |
| Keywords | react, dragline, draggable, react-dragline, react-draggable, react-component, magnetic adsorption |

## Links

- npm: https://www.npmjs.com/package/react-dragline
- Repository: https://github.com/zcued/react-dragline
- Issues: https://github.com/zcued/react-dragline/issues
- npm.io page: https://npm.io/package/react-dragline

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) 15.7.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.1.5
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [react-draggable](https://npm.io/package/react-draggable.md) ^2.2.6

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

- 1.1.0 (latest) — 2022-06-19
- 1.1.0-alpha.0 (alpha) — 2022-06-19
- 2.0.0-alpha.1 — 2020-01-01
- 1.0.0 — 2019-02-14

## README

# react-dragline
> Guide lines and magnetic adsorption to better align draggable elements.

[![npm version](https://img.shields.io/npm/v/react-dragline.svg)](https://www.npmjs.com/package/react-dragline)
[![npm downloads](https://img.shields.io/npm/dt/react-dragline.svg)](https://www.npmjs.com/package/react-dragline)
[![license](https://img.shields.io/npm/l/react-dragline.svg)](https://github.com/zcued/react-dragline/blob/master/LICENSE)


 **Examples available here:** [https://zcued.github.io/react-dragline/](https://zcued.github.io/react-dragline/)


### Installation
**npm**
```
npm install react-dragline --save
```
**yarn**
```
yarn add install react-dragline
```
If you aren't using browserify/webpack, a [UMD version of react-dragline](https://github.com/zcued/react-dragline/tree/master/dist) is available. It expects external React and ReactDOM.

### Example
```js
import { DraggableContainer, DraggableChild } from 'react-dragline'


class Example extends React.Component {
  state = [
    { id: 1, position: {x: 100, y: 10} },
    { id: 2, position: {x: 400, y: 200} },
  ]

  render() {
    const containerStyle = {
      height: 600,
      position: 'relative',
    }

    return (
      <DraggableContainer style={containerStyle}>
        {
          this.state.children.map(({ id, position }, index) => {
            const style = {
              width: 100,
              height: 100,
              cursor: 'move',
              background: '#8ce8df',
            }

            return (
              <DraggableChild key={id} defaultPosition={position}>
                <div style={style} />
              </DraggableChild>
            )
          })
        }
      </DraggableContainer>
    )
  }
}

ReactDOM.render(<Example />, container)
```

### Prop Types: DraggableContainer
| Property | Type | Default | Description |
| :-- | :-- | :-- | :-- |
| Container | String/Element | 'div' | The `DraggableContainer` will be rendered as a HTML tag or the React Component you specify |
| threshold | Number | 5 | The max distance of between others and the dragging element triggering magnetic adsorption |
| directions | Array | ['tt', 'bb', 'll', 'rr', 'tb', 'lr', 'rl', 'mh', 'mv'] | The directions you want. `tt` indicate the guide line will show when a element aligned with the top of the dragging element. |
| activeClassName | String | 'active' | if you want to add class name for the element aligned with one you drag, use it.|
| lineStyle | Object | {} | You can customize the style of auxiliary line by this option |
| limit | Boolean | true | Whether to restricts movement within the container |
| detectOverlap | Boolean | false | If true, then you can't drag block throw other blocks |

### Prop Types: DraggableChild
| Property | Type | Default | Description |
| :-- | :-- | :-- | :-- |
| axis | String | both | Determines which axis the draggable can move (both, x, y) |
| grid | Array | [1,1] | Specifies the x and y that dragging should snap to |

### Contributing
1. Fork, then clone the project.
2. Run the project in development mode: `$ yarn start`.
3. Make your changes.
4. Lint the code: `$ yarn lint`
5. Make sure that the tests still pass:`$ yarn test`
6. Commit and PR.

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