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

Downloads in past


0.6.5a year ago6 years agoMinified + gzip package size for react-interactable in KB


React interactable
This is a port of 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 and start playing with it using this code sandbox.
This library is for you if you want to have nice interaction animations in your:
If you are building a well performant android/ios app with react-native, react-native-interactable is a much better option than this library.


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


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 'react-interactable'

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

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>


You can see the options in the react-native-interactable docs.