React Screenshot API Integration

bash
npm install screenshotapi-to

typescript
// server/screenshot.ts
import express from 'express'
import { ScreenshotAPI, ScreenshotAPIError } from 'screenshotapi-to'

const router = express.Router()
const client = new ScreenshotAPI({ apiKey: process.env.SCREENSHOTAPI_KEY! })

router.get('/api/screenshot', async (req, res) => {
  const { url, width = '1280', height = '800', type = 'webp' } = req.query

  if (!url || typeof url !== 'string') {
    return res.status(400).json({ error: 'url parameter is required' })
  }

  try {
    const shot = await client.screenshot({
      url,
      width: Number(width),
      height: Number(height),
      type: type as 'png' | 'jpeg' | 'webp'
    })

    res.set('Content-Type', shot.contentType)
    res.set('Cache-Control', 'public, max-age=86400')
    res.send(Buffer.from(shot.image))
  } catch (error) {
    if (error instanceof ScreenshotAPIError) {
      return res
        .status(error.status || 502)
        .json({ error: error.message, code: error.code })
    }
    res.status(500).json({ error: 'Internal server error' })
  }
})

export default router

tsx
function WebsiteThumbnail({ url }: { url: string }) {
  const screenshotUrl = `/api/screenshot?url=${encodeURIComponent(url)}&width=1280&height=800&type=webp`

  return (
    <div className="overflow-hidden rounded-lg border">
      <img
        src={screenshotUrl}
        alt={`Screenshot of ${url}`}
        loading="lazy"
        className="h-auto w-full"
      />
    </div>
  )
}

tsx
import { useState, useCallback } from 'react'

interface ScreenshotProps {
  url: string
  width?: number
  height?: number
  className?: string
}

function Screenshot({ url, width = 1280, height = 800, className }: ScreenshotProps) {
  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')

  const screenshotSrc = `/api/screenshot?url=${encodeURIComponent(url)}&width=${width}&height=${height}&type=webp`

  const handleLoad = useCallback(() => setStatus('ready'), [])
  const handleError = useCallback(() => setStatus('error'), [])

  return (
    <div className={`relative overflow-hidden rounded-lg border ${className ?? ''}`}>
      {status === 'loading' && (
        <div className="flex h-48 items-center justify-center bg-muted">
          <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
        </div>
      )}

      {status === 'error' && (
        <div className="flex h-48 items-center justify-center bg-muted">
          <span className="text-sm text-muted-foreground">Failed to load preview</span>
        </div>
      )}

      <img
        src={screenshotSrc}
        alt={`Preview of ${url}`}
        onLoad={handleLoad}
        onError={handleError}
        className={status === 'ready' ? 'block h-auto w-full' : 'hidden'}
      />
    </div>
  )
}

tsx
import { useQuery } from '@tanstack/react-query'

function useScreenshot(url: string) {
  return useQuery({
    queryKey: ['screenshot', url],
    queryFn: async () => {
      const params = new URLSearchParams({
        url,
        width: '1280',
        height: '800',
        type: 'webp',
      })

      const res = await fetch(`/api/screenshot?${params}`)
      if (!res.ok) throw new Error('Screenshot failed')

      const blob = await res.blob()
      return URL.createObjectURL(blob)
    },
    staleTime: 1000 * 60 * 60,
    retry: 2,
  })
}

function SiteThumbnail({ url }: { url: string }) {
  const { data: imageUrl, isLoading, isError } = useScreenshot(url)

  if (isLoading) return <div className="h-48 animate-pulse rounded-lg bg-muted" />
  if (isError) return <div className="h-48 rounded-lg bg-muted" />

  return (
    <img
      src={imageUrl}
      alt={`Preview of ${url}`}
      className="h-auto w-full rounded-lg"
    />
  )
}

tsx
interface Site {
  name: string
  url: string
}

function ScreenshotGallery({ sites }: { sites: Site[] }) {
  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {sites.map((site) => (
        <a
          key={site.url}
          href={site.url}
          target="_blank"
          rel="noopener noreferrer"
          className="group cursor-pointer overflow-hidden rounded-xl border transition-shadow hover:shadow-lg"
        >
          <Screenshot url={site.url} width={1440} height={900} />
          <div className="p-4">
            <h3 className="font-semibold group-hover:text-primary">{site.name}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{site.url}</p>
          </div>
        </a>
      ))}
    </div>
  )
}

tsx
function ThemeComparison({ url }: { url: string }) {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <div>
        <h3 className="mb-2 font-medium">Light Mode</h3>
        <img
          src={`/api/screenshot?url=${encodeURIComponent(url)}&colorScheme=light`}
          alt="Light mode preview"
          className="rounded-lg border"
        />
      </div>
      <div>
        <h3 className="mb-2 font-medium">Dark Mode</h3>
        <img
          src={`/api/screenshot?url=${encodeURIComponent(url)}&colorScheme=dark`}
          alt="Dark mode preview"
          className="rounded-lg border"
        />
      </div>
    </div>
  )
}

/api/screenshot?url=https://example.com&type=webp&quality=80