# react-drag-guideline

> Guide lines to better align draggable children in React

Latest version **1.0.0** (published 2019-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-drag-guideline
pnpm add react-drag-guideline
yarn add react-drag-guideline
bun add react-drag-guideline
```

## 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.0.0 |
| Published | 2019-02-13 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 565.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huangdehao |
| Maintainers | huangdehao |
| Keywords | react, react-line, react-guideline, react-component-line, react-component-guideline, react-drag-line, react-drag-guideline, react-drag-ref-line |

## Links

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

## Dependencies (4)

- [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
- [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.0.0 (latest) — 2019-02-13
- 0.0.9 — 2019-01-27
- 0.0.8 — 2018-12-15
- 0.0.7 — 2018-12-12
- 0.0.6 — 2018-12-01
- 0.0.5 — 2018-11-29
- 0.0.4 — 2018-11-29
- 0.0.3 — 2018-11-29
- 0.0.2 — 2018-11-29
- 0.0.1 — 2018-11-29

## README

# react-drag-guideline
> Guide lines to better align draggable children in React.

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


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


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

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


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
| 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' ] | 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 | String | true | Whether to restricts movement within the container |

### 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-drag-guideline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._