Wondering what’s next for npm?Check out our public roadmap! »

    quinto
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    quinto

    License Build Status dependencies Status code style: prettier

    Tiny utility library to capture imprecise user interactions in the DOM

    Quinto captures imprecise user interactions in the DOM by adding 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 the boilerplate in assigning event handlers to individual elements.

    Install

    yarn add quinto

    Usage

    The library is currently implemented in React and vanilla JavaScript.

    React

    The default import is the React implementation.

    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>
         * }
         * */
      };
    }

    Vanilla

    For the vanilla implementation, import the library as such:

    import { Quinto } from 'quinto';
     
    const quinto = new Quinto({
      onClick: data => {
        console.log(data);
      }
    });

    Documentation

    Read the full API documentation.

    Example

    To run the examples, follow the steps listed in the subfolder README.

    License

    Apache 2.0

    Install

    npm i quinto

    DownloadsWeekly Downloads

    3

    Version

    0.3.0

    License

    Apache-2.0

    Unpacked Size

    25.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar