Feature selection

# install only the features you need
$ npm install --save @interactjs/interact \
  @interactjs/auto-start \
  @interactjs/actions \
  @interactjs/modifiers \
  @interactjs/dev-tools

import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX, event.pageY)
    },
  },
})

Adding the unscoped interactjs npm package to your project is the easiest way to get started with the library as it includes all features already pre-bundled and compiled to ES5 syntax. However, this might result in a lot of unused features increasing the size of your JS payload.

For a more streamlined build, you can add import the packages for each feature you need. See the npm streamlined installation docs for more details including a list of available packages.

@interactjs/dev-tools

The @interactjs/dev-tools package provides hints that can help you avoid common issues (eg. missing event handlers and useful CSS styles) while developing your application. Although these hints can be helpful, it’s best to avoid including them in your production deployment. There are some ways to do this below.

Optimizing for production

Babel plugin

// babel config
{
  "env": {
    "production": {
      "plugins": [
        "@interactjs/dev-tools/babel-plugin-prod",
      ]
    }
  }
}

// source file
import '@interactjs/actions/drag'
import interact from '@interactjs/interact'

// result
import '@interactjs/actions/drag/index.prod'
import interact from '@interactjs/interact/index.prod'

If you use babel in your deployment workflow, you can simply add @interactjs/dev-tools/babel-plugin-prod to the plugins section of your production babel config and all @interactjs/** imports will be changed to the optimized, production versions with development hints optimized out.

Without build tools

import '@interactjs/actions/drag/index.prod'
import interact from '@interactjs/interact/index.prod'

If you’re not using babel, then you’ll need to change your imports to include the .prod extension. For index files of directories you’ll need to add the filename (eg. @interactjs/actions -> @interactjs/actions/index.prod).