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