Chevron DownAPI Reference

Get Started


npm install mjolnir.js


import {EventManager} from 'mjolnir.js';

const eventManager = new EventManager(document.getElementById('container'));
function onClick(event) {}
function onPinch(event) {}

  click: onClick,
  pinch: onPinch

// ...

Using with React

The EventManager can be initialized with an empty root:

import {EventManager} from 'mjolnir.js';

const eventManager = new EventManager();
// Events can be registered now, but they will have no effect until
// the event manager is attached to a DOM element
eventManager.on('dblclick', onDblClick);

We may set the root element later to a DOM node that's rendered by React:

import React, {useRef, useEffect} from 'react';

function App() {
  const ref = useRef(null);
  useEffect(() => {
    // did mount
    // unmount
    return () => eventManager.setElement(null);
  }, []);

  return (
    <div ref={ref}>
      <Child />

Or add/remove event listeners when a React component is rendered:

function Child() {
  const ref = useRef(null);
  useEffect(() => {
    // did mount
    eventManager.on('panstart', onDragChild, ref.current);
    // unmount
    return () =>'panstart', onDragChild);
  }, []);

  return <div ref={ref}>Child node</div>;

Note that React's event chain is independent from that of mjolnir.js'. Therefore, a click event handler registered with mjolnir.js cannot be blocked by calling stopPropagation on a React onClick event.