Lifecycle

Instantiation

First, import the class:

import { Pointeract } from 'pointeract';

You may also want to grab some modules, find them in Modules:

import { Drag, PreventDefault } from 'pointeract';

Then, you need a DOM element to attach to, below shows how to do that in Vanilla DOM:

TypeScript

const app = document.getElementById('app') as HTMLDivElement;

HTML

<div id="app"></div>

Finally, you may want to define options, read elaboration in Options:

const options = {
    coordinateOutput: 'absolute',
}

Now, you can create a Pointeract instance by passing the element, modules, and options in a row, note that the options is optional:

const pointeract = new Pointeract(app, [Drag, PreventDefault], options);

INFO

Pointeract uses TypeScript generics to smartly infer the types of options and events available by scanning every module passed into the constructor.

Start

Pointeract does not do anything after initialization by design, make it running by calling start():

pointeract.start();

TIP

start() returns the instance itself, so you can chain it:

const pointeract = new Pointeract(app, [Drag, PreventDefault]); 
const pointeract = new Pointeract(app, [Drag, PreventDefault]).start(); 

Stop

To stop Pointeract, call stop():

pointeract.stop();

TIP

stop() also returns the class instance and does not destroy it. You can start it again later:

pointeract.stop();
// ... some logic here
pointeract.start();

Disposal

To completely dispose Pointeract, call dispose():

pointeract.dispose();

TIP

You don't need to call stop() before disposal, dispose() handles everything for you.