PageSightReact Component
Single-file React component for displaying rich link previews using the PageSight API.
Link Preview Hover Card Component
This is the actual component used in our API playground. It creates a hover card that appears when you hover over a link, showing a preview with image, title, and description. Perfect for Next.js applications using Server Actions.
components/link-preview.tsx
Loading code...
Server Action (preview-actions.ts)
The server action that handles fetching link previews. This runs on the server and uses permanent caching to avoid repeated API calls. Use this with the LinkPreview component above.
app/playground/preview-actions.ts
Loading code...
Standalone Component (Alternative)
Alternative standalone component that makes API calls directly from the client. Use this if you're not using Next.js Server Actions or prefer client-side fetching.
pagesight-link-preview.tsx
Loading code...
Usage
Import and use the component in your React application.
Loading code...
Component Props
| Prop | Type | Required | Description |
|---|---|---|---|
url | string | Yes | The URL to preview |
apiKey | string | Yes | Your PageSight API key |
categories | string[] | No | Categories to extract (default: ['metadata']) |
className | string | No | Custom CSS classes |
onError | (error: Error) => void | No | Error callback function |
Note
This is a complete, single-file component. Simply copy the code above into a file in your project and import it where needed. No additional dependencies required beyond React.