đŸ–± A JavaScript library for interactively picking DOM elements

Related tags

Learning resource typescript dom javascript-library
Overview

pick-dom-element

npm version

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.

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 directory for a more complete example of how to use the library.

You might also like...

An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Dec 13, 2022

An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Oct 3, 2022

Tiny js library to make DOM elements movable and resizable .

Tiny js library to make DOM elements movable and resizable .

resizedrag.js Tiny js library to make DOM elements movable and resizable . Demo Here . This library has added resizing functionalities to the existing

Mar 28, 2022

A pure javascript class for paginating through any number of DOM elements

A pure javascript class for paginating through any number of DOM elements

PurePajinate A pure javascript class for paginating through any number of DOM elements. Inspired by Pajinate, a plugin for jQuery. Options Option Type

Nov 21, 2022

Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Dec 16, 2022

LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements.

live_json LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements. It works within your existing LiveViews - just use push_

Dec 29, 2022

📃 Fold up DOM elements like paper

📃 Fold up DOM elements like paper

OriDomi Fold up DOM elements like paper Dan Motzenbecker, MIT License @dcmotz Visit oridomi.com for examples, documentation and notes. Read the annota

Dec 14, 2022

jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)

dynamicrows jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays). Requirements jQuery =2.0 if move-action used

Nov 9, 2020

Add class(es) to DOM elements while waiting for async action. Promise or callback.

jquery.loading Add class(es) to DOM elements while waiting for async action. Promise or callback. Install The simplest way is to include loading.js in

Mar 26, 2022
Comments
  • Add MIT License

    Add MIT License

    Since I don't know your name / company, I filled in your github name on line 3 of the license. You might want to close this PR and re-do it yourself using the instructions here: https://docs.github.com/en/github/building-a-strong-community/adding-a-license-to-a-repository. Alternatively I'm checking the "Allow edits by maintainers" box, so you should be able to modify this PR yourself if you'd like to go that route.

    Closes #2

    opened by patrick-mcdougle 1
  • MIssing features

    MIssing features

    Hi and big thanks for the component, design looks great with clean and simple interface which is easy to use. I would love to grab this package from one of the projects but I miss some features:

    • Ability to define container boundaries, area where picker is not listening for any mouse movements
    • Ability to define selectors to ignore elements on the page, e.g. Ignore navigation bar .nav, etc.
    • Ability to define selectors to listen to explicitly, e.g. only a tags.
    • Ability to interrupt event bubbling, i.e. prevent any further action on certain elements in onHover. For example if I want to ignore do nothing (no highlighting as well) when I face some reserved elements or so.
    • Additional event on mouse out, to have ability to attach my own behaviour on hover, e.g. add class, remove class.

    Besides that, please keep going there is really lack of good picker / inspector components in the wild. Thank you!

    opened by ed-posinitskiy 1
  • Add License on Github?

    Add License on Github?

    Hi!

    Thanks for creating this amazing library! We would like to use this library in a feature of a product we're building, but we noticed that the license is specified in the package.json, but not here in Github. Could you please add the MIT license here? We just want to make sure that we're clear to use as specified in the license. I will also add a PR to add it (to make it super easy for you), but I don't know your full name, so you're probably going to have to modify it.

    Thanks!

    opened by patrick-mcdougle 0
Releases(v0.2.2)
Owner
Harry Marr
I work here! :octocat:
Harry Marr
GitHub
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
An obsidian plugin that allows code blocks executed interactively in sandbox like jupyter notebooks. Supported language rust、kotlin、python、Javascript、TypeScript etc.

Obsidian Code Emitter This plugin allows code blocks executed interactively like jupyter notebooks. Currently, support languages: Rust Kotlin JavaScri

YiiSh 38 Dec 28, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

History explorer card This is a custom history card for Home Assistant. This card offers a highly interactive and configurable way to view the history

null 165 Dec 31, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
JavaScript library to resize, reduce, or change ranges of DOM elements.

Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 <input type="range"> element. Usage: Include range.js

Kyle Belanger 4 Jun 3, 2021
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.

dragmove.js A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzip

Kailash Nadh 814 Dec 29, 2022