Microlink SDK Documentation

Install the appropriate package based on your framework (React or Vanilla) and whether you need hover preview functionality.

React

Requires styled-components.

npm install @microlink/react styled-components --save

Vanilla JavaScript

npm install @microlink/vanilla --save

Hover Packages

To show previews when users hover over links:

React:

npm install @microlink/hover-react styled-components --save

Vanilla:

npm install @microlink/hover-vanilla --save

If you are using the @microlink/react package, you must ensure the following peer dependencies are installed in your project:

- `react` >= 17
- `react-dom` >= 17
- `styled-components` >= 5

React

Import the Microlink component and provide a url prop.

import Microlink from '@microlink/react'

export default function App() {
  return <Microlink url="https://github.com" />
}

Vanilla JavaScript

Use the microlink() function with a CSS selector to transform anchor tags into preview cards.

<a href="https://github.com">GitHub</a>

<script>
  microlink('a')
</script>

Vanilla via CDN

<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@latest/dist/microlink.min.js"></script>

Hover packages display a preview card when users hover over links.

React

Use the MicrolinkHover higher-order component to wrap your link component.

import MicrolinkHover from '@microlink/hover-react'

const Link = (props) => <a {...props} />

const HoverLink = MicrolinkHover(Link)

export default function App() {
  return (
    <HoverLink href="https://github.com">
      Hover over me!
    </HoverLink>
  )
}

Vanilla JavaScript

Include the hover vanilla script and call microlink() with a selector.

<a href="https://github.com">GitHub</a>

<script src="https://cdn.jsdelivr.net/npm/@microlink/hover-vanilla@latest/dist/microlink.min.js"></script>
<script>
  microlink('a')
</script>

You can override or transform the metadata fetched from the API using the setData prop. This is useful for SSR or custom data injection.

Using an object to merge data:

<Microlink
  url="https://example.com"
  setData={{
    title: 'Custom Title',
    description: 'Custom description',
    image: { url: 'https://example.com/image.jpg' }
  }}
/>

Using a function to transform data:

<Microlink
  url="https://example.com"
  setData={(data) => ({
    ...data,
    title: data.title.toUpperCase()
  })}
/>

Static Mode (No API Fetch): To disable API calls entirely and rely solely on provided data, set fetchData={false}.

<Microlink
  url="https://example.com"
  fetchData={false}
  setData={{ title: 'My Title' }}
/>

When using video or audio media types, use these props to control playback behavior:

In Vanilla JS, you can configure individual cards directly in your HTML using data-* attributes. These are automatically parsed and applied by the microlink() function.

<a href="https://github.com"
   data-media="video"
   data-size="large"
   data-contrast="true"
   data-set-data='{"title": "Custom Title"}'>
  GitHub
</a>

The Microlink SDK is compatible with all modern browsers. Note that the lazy loading feature relies on IntersectionObserver support, which is standard in all modern browser versions.

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

The MicrolinkHover Higher-Order Component (HOC) wraps a React component (typically a link) to display a Microlink preview card when the user hovers over it.

It works by wrapping your LinkComponent in a Wrapper and positioning a PopOver containing a <Microlink /> component above it. The preview becomes visible on hover using CSS transitions.

To use it, pass your link component as the first argument and any Microlink-specific props (like url) as the second argument.

import MicrolinkHover from '@microlink/hover-react';
import { Link } from 'react-router-dom'; // or any other link component

// Create the enhanced component
const HoverableLink = MicrolinkHover(Link, { url: 'https://google.com' });

// Use it in your application
function App() {
  return (
    <div>
      <HoverableLink to="https://google.com">Hover over me!</HoverableLink>
    </div>
  );
}