Utility to capture imprecise user interactions in the DOM.
Quinto adds an event listener to the document body for click
and mouseover
event types. When an event is captured, the library walks the DOM until it finds the first nearest ancestor assigned as a landmark.
The purpose is to reduce boilerplate in assigning event handlers to individual elements.
yarn add quinto
The library is currently implemented in React and vanilla JavaScript.
import * as React from 'react';
import Quinto from 'quinto';
class App extends React.Component {
render() {
return (
<div>
<Quinto onClick={this.handleClick} />
<div data-q={JSON.stringify({ id: 'text' })}>
<div>
<div>
<div>Text</div>
</div>
</div>
</div>
</div>
);
}
handleClick = data => {
// clicking on <div>Text</div>
console.log(data);
/**
* {
* data: {
* id: 'text'
* },
* depth: 3,
* element: <div>Text</div>
* }
* */
};
}
import { Quinto } from 'quinto';
const quinto = new Quinto({
onClick: data => {
console.log(data);
}
});
See docs for API documentation.
See the contributing guidelines.