@peekjs/react

React bindings for Peek — live link-hover previews.

Install

npm install @peekjs/react

Option A — hook (whole page)

Activate Peek on any links matching a CSS selector:

import { usePeek } from '@peekjs/react';

export function App() {
  usePeek({
    selector: 'a[data-peek]',
    delay: 200,
  });
  return (
    <main>
      <a href="/docs" data-peek>Docs</a>
    </main>
  );
}

Option B — <PeekProvider> + <PeekLink> (custom content)

Render a fully custom React card inside the preview — no HTML strings:

import { PeekProvider, PeekLink } from '@peekjs/react';

export function App() {
  return (
    <PeekProvider delay={200}>
      <PeekLink href="/user/1" data={user}>
        Jane Doe
        {(data) => <UserCard user={data} />}
      </PeekLink>
    </PeekProvider>
  );
}

The child function receives the data prop you pass to <PeekLink>. Omit it and the standard Peek renderer pipeline runs instead.

Options

All @peekjs/core options are accepted by both usePeek and <PeekProvider>.

Links

• Full docs & demo
• GitHub