Interreact NPM

Interreact

A fork of react-interactable by Javier Marquez. It allows your UI to react in a physically natural way to user's drag interactions. See it working in the react-interactable playground and start playing with it using this code sandbox.

This library is for you if you want to have nice interaction animations in your:

Multiplatform app using react-native-web.
Expo app 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 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

// Import the libraries
import React from 'react'
import Interactable from 'noNative'

// ... 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:

// Inside webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      'react-native-interactable': 'react-interactable'
    }
  }
};

Using it with plain react (react-dom)

// 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>
)