JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 803
  • Score
    100M100P100Q96467F
  • License ISC

JavaScript and TypeScript library for selecting elements on a web page.

Package Exports

  • js-element-picker
  • js-element-picker/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (js-element-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

js-element-picker

JavaScript/TypeScript library for selecting elements on a web page.

Installation

Install with npm:

npm install js-element-picker

Or yarn:

yarn add js-element-picker

Simple example

import { ElementPicker } from 'js-element-picker';

new ElementPicker({
  picking: true,
  onClick: (target) => alert(`Picked element: ${target.tagName}`),
});

Constructor arguments

Name Type Default Description
picking boolean if true, starts picking immediately after initialization
container Element document if container was passed, picking will be inside of this container
overlayDrawer Function Default overlay See type below. If overlayDrawer was passed, it will be drawn instead of default overlay on the hovering element
onTargetChange onTargetChange?: (target?: Element, event?: MouseEvent) => void; callback that will fire every time when hovering target was changed
onClick (target: Element) => void; callback that fires when user clicks on the picked element

overlayDrawer type:

overlayDrawer?: (
    position?: { x: number; y: number; width: number; height: number } | null,
    event?: MouseEvent | null
  ) => Element;

Methods:

  • startPicking() - start picking elements
  • stopPicking() - stop picking elements