https://github.com/hmarr/pick-dom-element

🖱 A JavaScript library for interactively picking DOM elements
https://github.com/hmarr/pick-dom-element

dom javascript-library typescript

Last synced: about 1 year ago
JSON representation

🖱 A JavaScript library for interactively picking DOM elements

• Host: GitHub
• URL: https://github.com/hmarr/pick-dom-element
• Owner: hmarr
• License: mit
• Created: 2020-10-04T13:14:50.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-18T13:59:57.000Z (over 2 years ago)
• Last Synced: 2025-04-08T13:08:06.688Z (about 1 year ago)
• Topics: dom, javascript-library, typescript
• Language: TypeScript
• Homepage:
• Size: 47.9 KB
• Stars: 41
• Watchers: 3
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# pick-dom-element

[![npm version](https://badge.fury.io/js/pick-dom-element.svg)](https://badge.fury.io/js/pick-dom-element)

A JavaScript library (written in TypeScript) for interactively picking DOM elements.



  



## Usage

Create an instance of the `ElementPicker` class, and call its `start()` method to start picking. Provide an `onHover` or `onClick` callback to get the picked element(s). Call `stop()` to stop picking and remove the overlay from the DOM.

```javascript

import { ElementPicker } from "pick-dom-element";

const style = { borderColor: "#0000ff" };

const picker = new ElementPicker({ style });

picker.start({

  onHover: (el) => console.log(`Hover: ${el}`),

  onClick: (el) => {

    picker.stop();

    console.log(`Picked: ${el}`);

  },

});

```

See the [example](example/) directory for a more complete example of how to use the library.