# react-interactable

> A port of react-native-interactable to make it work on the web

Latest version **0.6.5** (published 2022-06-04) · MIT license · 0 weekly downloads

## Install

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

## 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.6.5 |
| Published | 2022-06-04 |
| First published | 2017-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Author | Javier Marquez |
| Maintainers | arqex |

## Links

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

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Recent versions

- 0.6.5 (latest) — 2022-06-04
- 0.6.4 — 2019-01-20
- 0.6.3 — 2019-01-18
- 0.6.2 — 2018-12-04
- 0.6.1 — 2018-11-29
- 0.6.0 — 2018-11-26
- 0.5.0 — 2018-11-19
- 0.4.0 — 2018-11-18
- 0.3.0 — 2018-11-17
- 0.2.0-rc.1 — 2018-02-20
- 0.0.1 — 2017-06-14

## README

# React interactable

This is a port of [react-native-interactable](https://github.com/wix/react-native-interactable) to JS. It allows your UI to react in a physically natural way to user's drag interactions. See it working in the [react-interactable playground](https://react-interactable.netlify.com/) and start playing with it using this [code sandbox](https://codesandbox.io/s/n4kq4ylk6l).

This library is for you if you want to have nice interaction animations in your:
* Multiplatform app using [react-native-web](https://github.com/necolas/react-native-web).
* [Expo app](https://expo.io/) that you don't want to eject.
* React.js webapp, not a native one.

If you are building a well performant android/ios app with react-native, [react-native-interactable](https://github.com/wix/react-native-interactable) is a much better option than this library.

## Install
Just install via npm or yarn

If our project is using react-native-web:
```
npm install --save react-interactable
```

If we are using just plain React:
```
npm install --save react-interactable animated react-panresponder-web
```

## Usage
With an interactable view you can make any component react to dragging events. 

**Using it with react-native-web**
```js
// Import the libraries
import React from 'react'
import Interactable from 'react-interactable'

// ... later, in your render code
return (
	<Interactable.View>
		<Text>I am draggable!</Text>
	</Interactable.View>
)
```

If we want to use `react-native-interactable` for iOS and Android versions and `react-interactable` for the dom seamlessly, we can add an alias to our webpack.config.js and just use `import Interactable from "react-native-interactable"` as we are used to do:
```js
// Inside webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      'react-native-interactable': 'react-interactable'
    }
  }
};
```

**Using it with plain react (react-dom)**
```js
// Import the libraries, pay attention to require the no native version
import React from 'react'
import Interactable from 'react-interactable/noNative'

// ... later, in your render code
return (
	<Interactable.View>I am draggable!</Interactable.View>
)
```

## Options
You can see the options in the [react-native-interactable docs](https://github.com/wix/react-native-interactable#usage).

## Credits
* [Wix](https://wix.com) team for the original [react-native-interactable](https://github.com/wix/react-native-interactable)
* Of course, [Facebook](https://facebook.com) team for its game changing [React](https://reactjs.org/).
* [@souporserious](https://github.com/souporserious) for lending the `react-interactable` npm package :)

---

* [MIT licensed](LICENSE)
* [Changelog here](changelog.md)

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