web-page-snapshot

web-page-snapshot

A React component to render web page snapshot previews from URLs. Works with React and Next.js applications.

Installation

npm install web-page-snapshot

or

yarn add web-page-snapshot

Usage

Basic Usage

import { WebPageSnapshot } from 'web-page-snapshot';

function App() {
  return (
    <WebPageSnapshot url="https://github.com" />
  );
}

With Custom Dimensions

<WebPageSnapshot 
  url="https://github.com" 
  width={500} 
  height={350}
/>

Show Metadata (Title, Description, Favicon)

<WebPageSnapshot 
  url="https://github.com" 
  showTitle={true}
  showDescription={true}
  showFavicon={true}
/>

Non-Clickable Snapshot

<WebPageSnapshot 
  url="https://github.com" 
  clickable={false}
/>

Custom Link Target

<WebPageSnapshot 
  url="https://github.com" 
  target="_self"
/>

With Custom Styling

<WebPageSnapshot 
  url="https://github.com" 
  className="my-custom-class"
  style={{ borderRadius: '16px' }}
/>

With Event Handlers

<WebPageSnapshot 
  url="https://github.com" 
  onLoad={() => console.log('Snapshot loaded!')}
  onError={(error) => console.error('Failed to load:', error)}
/>

Custom Placeholder

<WebPageSnapshot 
  url="https://github.com" 
  placeholder={<div>Loading preview...</div>}
/>

Using Different Screenshot Services

// Using Microlink (default)
<WebPageSnapshot 
  url="https://github.com" 
  screenshotService="microlink"
/>

// Using URLBox with API key
<WebPageSnapshot 
  url="https://github.com" 
  screenshotService="urlbox"
  apiKey="your-api-key"
/>

// Using custom screenshot service
<WebPageSnapshot 
  url="https://github.com" 
  screenshotService="custom"
  customScreenshotUrl="https://your-service.com/screenshot?url={url}"
/>

Props

Prop	Type	Default	Description
url	string	required	The URL of the web page to capture
width	number | string	400	Width of the snapshot container
height	number | string	300	Height of the snapshot container
alt	string	-	Alternative text for the snapshot image
clickable	boolean	true	Whether to open the URL when clicking
target	'_blank' | '_self' | '_parent' | '_top'	'_blank'	Target for the link
className	string	-	Additional CSS class names
style	React.CSSProperties	-	Inline styles for the container
onLoad	() => void	-	Callback when snapshot loads
onError	(error: Error) => void	-	Callback when snapshot fails
placeholder	React.ReactNode	-	Custom loading placeholder
showFavicon	boolean	true	Show website favicon
showTitle	boolean	true	Show website title
showDescription	boolean	false	Show website description
screenshotService	'microlink' | 'urlbox' | 'custom'	'microlink'	Screenshot service to use
customScreenshotUrl	string	-	Custom screenshot URL template
apiKey	string	-	API key for screenshot service

Screenshot Services

This component uses external screenshot services to capture web page previews:

• Microlink (default): Free tier available, good for most use cases
• URLBox: Requires API key, offers more customization
• Custom: Use any screenshot service by providing a URL template

Next.js Usage

The component works seamlessly with Next.js. For server-side rendering, make sure to dynamically import the component:

import dynamic from 'next/dynamic';

const WebPageSnapshot = dynamic(
  () => import('web-page-snapshot').then((mod) => mod.WebPageSnapshot),
  { ssr: false }
);

function Page() {
  return <WebPageSnapshot url="https://github.com" />;
}

Styling

The component comes with default styles that can be customized using CSS. You can also override styles using the className and style props.

CSS Classes

• .web-page-snapshot - Main container
• .web-page-snapshot__link - Link wrapper (when clickable)
• .web-page-snapshot__image-container - Image container
• .web-page-snapshot__image - Snapshot image
• .web-page-snapshot__loading - Loading state container
• .web-page-snapshot__spinner - Default loading spinner
• .web-page-snapshot__error - Error state container
• .web-page-snapshot__info - Metadata info section
• .web-page-snapshot__favicon - Favicon image
• .web-page-snapshot__title - Page title
• .web-page-snapshot__description - Page description
• .web-page-snapshot__url - URL display

License

MIT