Neophobe Plebeian Mumpsimus

    pick-element-overlay

    2.0.1 • Public • Published

    pick-element-overlay

    Move an overlay around as user picks an element with a mouse.

    Install

    $ yarn add pick-element-overlay
    

    or

    $ npm install pick-element-overlay
    

    Usage

    import { pickElement } from 'pick-element-overlay';
    
    const picker = pickElement({
      mouseOver(target, overlay) {
        // Add styles and/or children to overlay here
      },
    });
    
    picker.finish.then((element) => {
      if (element) {
        // user picked element
      } else {
        // pick operation was canceled
      }
    });
    
    // cancels pick operation
    picker.cancel();

    API

    pickElement(options = {})

    options

    type Options = {
      /**
       * Invoked when user mouses over an element. Optional, defaults to no-op.
       *
       * This is where the overlay can be styled. Probably don't change anything
       * related to its display, position, width, or height.
       *
       * @param target Element that was moused over
       * @param overlay Overlay element that is visible and positioned over target.
       */
      mouseOver?: (target: Element, overlay: HTMLElement) => void;
      /**
       * Invoked when user mouses out from an element. Optional, defaults to no-op.
       *
       * @param target Element that was moused-out from
       */
      mouseOut?: (target: Element) => void;
    };

    Returns

    A picker object.

    type Picker = {
      /**
       * Cancel the pick operation.
       */
      cancel: () => void;
      /**
       * Resolved with the picked element or null if the pick was canceled.
       */
      finish: Promise<Element | null>;
    };

    License

    MIT

    Install

    npm i pick-element-overlay

    DownloadsWeekly Downloads

    1

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    23.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • psalaets