Link Previewer

Simple, lightweight pure JavaScript component that adds a link preview functionality.

Demo

Open demo.html from this repo directly in your browser (no build step required) to see it in action.

Installation

As an ES module / npm package

npm install @jagermesh/js-link-previewer

import LinkPreviewer from '@jagermesh/js-link-previewer';

const linkPreviewer = new LinkPreviewer();
linkPreviewer.attach('a');

As a plain <script> tag

<script src="https://unpkg.com/@jagermesh/js-link-previewer/dist/link-previewer.min.js"></script>
<script>
  const linkPreviewer = new window.LinkPreviewer();
  linkPreviewer.attach('a');
</script>

Usage

1. Create a Link Previewer instance:

const linkPreviewer = new LinkPreviewer();

2. Attach it to a selector:

linkPreviewer.attach('a');

attach also accepts an optional settings object:

linkPreviewer.attach('a', {
  bgColor: 'white',
  fgColor: 'black',
  beautify: function(overlayElement, linkElement) {
    // customize the preview overlay before it is shown
  },
});