react-js-element-picker

React TypeScript library for selecting elements on a web page.

Installation

Install with npm:

npm install react-js-element-picker

Or yarn:

yarn add react-js-element-picker

Basic JavaScript/TypeScript library

This library is based on another JavaScript/TypeScript library js-element-picker. If you need to use pure JS/TS or want to write a wrapper for another framework, you can get the library here

ElementPickerArea

Library contain React component ElementPickerArea. When you create it, it allows you to pick any child of this component

Simple example

import { ElementPickerArea } from 'react-js-element-picker';

const MyComponentWithPickingArea = () => {
  const [picking, setPicking] = useState<boolean>(true);
  
  <ElementPickerArea
    picking={picking}
    onClick={(target) => {
      console.log('Goal target is: ', target?.tagName);
      setPicking(false);
    }}
  >
    <div>
      <h1>First item</h1>
      <h1>Second item</h1>
    </div>
  </ElementPickerArea>;
};

Props

| Name | Type | Default | Description |-------------|-------------|---------|-------------| | picking | boolean | |if true, starts picking, if false, stops picking| | overlayDrawer | Function | Default overlay |See type below. If overlayDrawer was passed, it will be drawn instead of default overlay on the hovering element| | onTargetChange | (target?: Element, event?: MouseEvent) => void; | |callback that will fire every time when hovering target was changed| | onClick | (target: Element, event?: MouseEvent) => 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
  ) => JSX.Element;

Examples

In this example you create ElementPickerArea component which starts picking immediately after initialization and after click on target logs it in console and stops picking

import { ElementPickerArea } from 'react-js-element-picker';

const MyComponentWithPickingArea = () => {
const [picking, setPicking] = useState<boolean>(true);

<ElementPickerArea
  picking={picking}
  onClick={(target) => {
    console.log('Goal target is: ', target?.tagName);
    setPicking(false);
  }}
>
  <div>
    <h1>First item</h1>
    <h1>Second item</h1>
  </div>
</ElementPickerArea>;
};

If you want to start picking on any event (for example, button click), you can use picking prop

import { ElementPickerArea } from 'react-js-element-picker';

const MyComponentWithPickingArea = () => {
const [picking, setPicking] = useState<boolean>(true);

<>
    <button onClick={() => setPicking(true)}>Start picking</button>
    <ElementPickerArea
      picking={picking}
      onClick={(target) => {
        console.log('Goal target is: ', target?.tagName);
        setPicking(false);
      }}
    >
      <div>
        <h1>First item</h1>
        <h1>Second item</h1>
      </div>
    </ElementPickerArea>
</>
};

If you want to make something while user is picking elements, you can use onTargetChange prop. That is function which will fire every time when target was updated

import { ElementPickerArea } from 'react-js-element-picker';

const MyComponentWithPickingArea = () => {
const [picking, setPicking] = useState<boolean>(true);

<ElementPickerArea
  picking={picking}
  onClick={(target) => {
    console.log('Goal target is: ', target?.tagName);
    setPicking(false);
  }}
  onTargetChange={(target) => {
    console.log('Hovering target is: ', target?.tagName);
  }}
>
  <div>
    <h1>First item</h1>
    <h1>Second item</h1>
  </div>
</ElementPickerArea>;
};

If you want to create custom overlay for hovering element, you need to pass overlayDrawer() prop. It gets position and event as arguments and must return an JSX.Element. Result element will appear inside of overlay, so you don't need to think about positioning. Actually position is some fields from event just to make it easier to get.

So first you need to create a component for overlay drawer:

const HoveringOverlay = ({
  position,
  event,
}: {
  position: { x: number; y: number } | null;
  event: MouseEvent | null;
}) => {
  const target = event ? (event.target as Element) : null;

  return (
    <div className="hovering-overlay">
      {target ? <span>{target?.tagName}</span> : null}
      {position ? <span>{`${position.x}, ${position.y}`}</span> : null}
    </div>
  );
};

.hovering-overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 0, 166, 0.504);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: monospace;
}

And then you can use it:

import { ElementPickerArea } from 'react-js-element-picker';

const MyComponentWithPickingArea = () => {
const [picking, setPicking] = useState<boolean>(true);

<ElementPickerArea
  picking={picking}
  onClick={(target) => {
    console.log('Goal target is: ', target?.tagName);
    setPicking(false);
  }}
  overlayDrawer={(position, event) => (
      <HoveringOverlay position={position} event={event} />
  )}
>
  <div>
    <h1>First item</h1>
    <h1>Second item</h1>
  </div>
</ElementPickerArea>;
};

As a result you'll see something like this: