# @odnh/use-swipe

> react hook useSwipe

Latest version **1.2.4** (published 2022-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @odnh/use-swipe
pnpm add @odnh/use-swipe
yarn add @odnh/use-swipe
bun add @odnh/use-swipe
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2022-02-20 |
| First published | 2020-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 김도현 |
| Maintainers | ehgus6887 |
| Keywords | react, react hook, swipe, use swipe |

## Links

- npm: https://www.npmjs.com/package/@odnh/use-swipe
- Repository: https://github.com/d0hyeon/useSwipe
- npm.io page: https://npm.io/package/@odnh/use-swipe

## Dependencies (1)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## 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.2.4 (latest) — 2022-02-20
- 1.2.3 — 2022-02-20
- 1.2.2 — 2021-11-26
- 1.2.1 — 2021-11-26
- 1.2.0 — 2021-11-26
- 1.1.1 — 2021-10-05
- 1.1.0 — 2021-10-05
- 1.0.4 — 2021-09-28
- 1.0.3 — 2021-09-28
- 1.0.2 — 2021-07-24
- 1.0.1 — 2021-07-24
- 1.0.0 — 2021-04-13
- 0.1.3-1 — 2021-04-13
- 0.1.2-1 — 2020-12-04
- 0.1.3 — 2020-12-01
- … 21 more at https://npm.io/package/@odnh/use-swipe/versions

## README

# useSwipe

React Custom Hook useSwipe

## Install

```bash
yarn add @odnh/use-swipe
# or
npm install @odnh/use-swipe
```

## Use
```tsx
  useSwipe(target: Target, options: Options) => SwipeMoveState | SwipeDoneState;
```

### Parameters
|Name|Type|Description|Required|
|-----|-----------|---------------|-----|
|target|`HTMLElement` or `React.MutableRefObject<HTMLElement>`|target element|`true`|
|option|`Object`|[Options](https://github.com/d0hyeon/useSwipe/blob/master/README.md#options)|`false`|

#### options 
|Name|type|Description|Default value|
|-----|--------|---------------------------|----|
|fps|`number`|-|60|
|useEvent|`boolean`|Whether to use the swipe event [`swipestart` - `swipemove` - `swipeend`].|`false`|
|excludeElement|`HTMLElement`|Elements to exclude the beginning.|`null`|


---
### Returns
|Name|Type|Description|
|-----|-----------|---------------|
|swipeState|`SwipeMoveState` or `SwipeDoneState`| |
<br />

##### SwipeMoveState
|Name|Type|Description|
|-----|----------|-----------|
|state|`SwipeStateEnum.MOVE`| move |
|x|`number`|moving position value|
|y|`number`|moving position value|
|difference|`{x: 0, y: 0}`|position difference between the beginning and the end.|
|duration|`0`|time of moved|

<br/>

##### SwipeDoneState
|Name|Type|Description|
|-----|----------|-----------|
|state|`SwipeStateEnum.DONE`| done |
|x|`0`|moving position value|
|y|`0`|moving position value|
|difference|`{x: number, y: number}`|position difference between the beginning and the end.|
|duration|`number`|time of moved|
<br/> 

## Example

[live demo](https://k5yub.csb.app/)

```jsx
import React from 'react';
import useSwipe, { SwipeStateEnum } from '@odnh/use-swipe';

const DEFAULT_STYLE = {
  width: '100px',
  height: '100px',
  border: '1px solid #ddd',
  transform: 'translate(0, 0)',
  transition: 'transform 300ms'
};
const App = () => {
  const elementRef = React.useRef(null);
  const swipe = useSwipe(elementRef);
  
  const swipeStyle = React.useMemo(() => {
    if(state === SwipeStateEnum.DONE) {
      return DEFAULT_STYLE;
    } else {
      const { x, y } = swipe
      return {
        ...DEFAULT_STYLE,
        transform: `translate(${x}px, ${y}px)`,
        transition: 'transform 100ms'
      }
    }
  }, [swipe]);
  
  return (
    <div ref={elementRef} style={{width: '100vw', height: '100vh'}}>
      <div
        style={swipeStyle}
      >
        swipe
      </div>
    </div>
  )
}

```

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