modern, lightweight, robust and extensible user gesture recognizer

Demo
•

Documentation
•

npm

What's Pointeract?

Pointeract is a tiny JavaScript/TypeScript utility library focusing on one thing - handling user interactions with DOM elements, e.g. multitouch and touchpad.

With the unique strength of versatile typings in TypeScript and its dynamic nature, Pointeract have achieved a highly _modular, extendable and efficient_ architecture. Its core bundle size is only 1KB minified + gzipped, functionalities come from also byte-sized modules. It's fully tree-shakable, the fewer modules you use, the smaller your bundle is.

Advantages

- 🐣 Tiny: With base 1KB minified and gzipped, 1-2KB for normal usage.
- 💪 Robust: Excels at complex gestures where most interaction libraries fail, Why?
- 🧩 Extensible: Extend Pointeract effortlessly via our module API.
- 🔌 Flexible during Runtime: Options are updated reactively. Stop/start any module during runtime.
- 🛡️ Safe: Not modifying the DOM (except the PreventDefault module). Meticulous clean up prevents memory leaks.

Get Started

Install Pointeract using your favorite package manager:

``sh

`npm`


$ npm add pointeract
pnpm

$ pnpm add pointeract
yarn

$ yarn add pointeract


Or include the following lines directly in your HTML file:

`html`

This link ships the latest ESM version by default.

Then simply grab the core class and a module:

`TypeScript import { Pointeract, Drag } from 'pointeract';

new Pointeract({ element: yourElement }, Drag) .start() .on('drag', e => console.log(e));`

Congratulations! You can now press your mouse or finger to the element and move, the console will log events like a waterfall.

Read next: dive into the usage of Pointeract in Use Pointeract.

`Currently Supported Features`

- Click (Double Click, Triple Click, Quadruple Click, Any Click) - Drag - Pan and Zoom via Mouse Wheel (ctrl/shift key binding, touchpad support)- Pan and Zoom via Multitouch (Pan, Pinch) - One-line Prevent Default - Smooth Everything (drag / pan / zoom / any interaction involving numbers)

Those interactions are shipped via modules, which can be composed from a single drag-and-drop to a canvas app.

Missing your desired interaction? Write your own module!

`How Pointeract Stands Out?`

There're already plenty of interaction libraries out there, most famous ones are Interact.js and Hammer.js`, but Pointeract is different.

| Criteria | Pointeract | Hammer.js | Interact.js |
| :-------------------------------------------------------- | :---------------------------------------------------: | :----------------------------------------------: | :-------------------------------------------------: |
| Written in TypeScript? | ✅ | ❌ | ✅ |
| Tree-shakeable? | ✅ | ❌ | ❌ |
| Total Bundle Size (Minified + Gzipped) | 👑 3KB | 7KB | 28KB |
| Last Updated | 👑 Actively Maintained | 2015 | 2023 |
| Features | Pointer and Wheel Related + Some Utils | Pointer Related | 👑 Pointer and Wheel Related + Comprehensive Utils |
| Robust? (See Testing) | ✅ | ❌ Element Jerks | ❌ Element Ignores the Second Touch |
| Extensible? | ✅ | ❌ | ❌ |

Get Involved

This project welcomes anyone that have ideas to improve it.

- Open a pull request for a new module, event standard, documentation update, and so on.
- Open an issue if you find a bug.
- Start a new thread in Discussions if you have feature requests or questions, please avoid posting them in Issues.
- Report a vulnerability if you find one, please do not disclose it publicly.

Copyright and License