highlight-overlay-js v0.1.19

Highlight Overlay

This is a tiny vanilla JavaScript library that can be used to apply overlays with highlighted areas on web pages. It is not tied to any particular framework and can be easily integrated into any framework.

Showcases

As flexible as you need	Available on any html element

Usage

// Create an instance of overlay
const highlightOverlay = new HighlightOverlay();

// Show the overlay
highlightOverlay.show(document.querySelectorAll(`#element-1, #element-2`));

// In case the cloing is controlled by consumer:
highlightOverlay.hide();

  import React from 'react';
  import HighlightOverlay from 'highlight-overlay-js';
  
  const highlightOverlay = new HighlightOverlay();
  
  export const HyHeader: React.FC = () => (
      <div>
          <h1 id="myHeader">My header title</h1>
  
          <button onClick={() => highlightOverlay.show(document.querySelectorAll('#myHeader'))}>Highlight</button>
      </div>
  )
  
  highlightOverlay.show(document.querySelectorAll('#myHeader'));

Methods

Parameters

Enums

Todos

• Clear cursor position after losing screen view port