npm
Sign UpSign In

web-page-snapshot
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

web-page-snapshot

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

npm version

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

Readme

Keywords