jsDelivr Package Stats

Display jsDelivr packages from a provided namespace and package names with real-time stats, rankings, and bandwidth usage. Perfect for showcasing your packages and their adoption metrics.

Currently used at my stats page https://phucbm.com/stats

Live Playground · Edit and see changes instantly

Or edit with AI support by

Open in

'use client'

import {useEffect, useState} from 'react';
import {JsDelivrPackage, JsDelivrPackages} from "@/components/phucbm/jsdelivr";
import {getJsDelivrPackages} from "@/lib/getJsDelivrPackages";

export default function Example() {
    const [packages, setPackages] = useState<JsDelivrPackage[]>([])
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    // jsDelivr package names to display
    const names = [
        'flickity-responsive',
        'jquery-scroll-direction-plugin',
        'cursorjs',
        'scroll-snooper',
        'pia',
        'cuajs',
        'magnetic-button'
    ];

    useEffect(() => {
        getJsDelivrPackages(names, 'phucbm', 'month', 10)
            .then(data => {
                setPackages(data)
                setLoading(false)
            })
            .catch(err => {
                setError(err instanceof Error ? err.message : 'Failed to load packages')
                setLoading(false)
            })
    }, [])

    if (loading) {
        return <div className="h-screen flex items-center justify-center bg-slate-50">Loading...</div>
    }

    if (error) {
        return (
            <div className="h-screen flex items-center justify-center bg-slate-50">
                <div className="text-red-600">Error: {error}</div>
            </div>
        )
    }

    return (
        <div className="bg-slate-50">
            <div className="max-w-[600px] mx-auto py-6">
                <JsDelivrPackages packages={packages}/>
            </div>
        </div>
    );
}

Installation

pnpm dlx shadcn@latest add @phucbm/jsdelivr

Props

Name	Type	Default
`packages`	`JsDelivrPackage[]` Fetched packages data
`statsPeriod`	`"week" \| "month" \| "year"` Time period for statistics aggregation	`'month'`
`showBandwidth`	`boolean` Display bandwidth usage statistics	`false`
`showRankText`	`boolean` Show “Xth most popular” text	`true`
`lastUpdatedMonths`	`number` Number of months used for fetching (for display message)	`12`
`renderItem`	`(pkg: JsDelivrPackage, periodText: string) => ReactNode` Custom renderer for each package item

Usage

Basic Usage


import JsDelivrPackages from '@/components/phucbm/jsdelivr'
import { getJsDelivrPackages } from '@/lib/getJsDelivrPackages'
 
export default async function ShowPackages() {
  const packages = await getJsDelivrPackages(
    ['draw-svg', 'cursorjs'],        // Package names
    'phucbm',                         // GitHub namespace
    'month',                          // Stats period: 'week' | 'month' | 'year'
    10                                // minHits: only show packages with hits >= this
  )
 
  return <JsDelivrPackages packages={packages} />
}

Custom Item Renderer


import JsDelivrPackages, { JsDelivrPackage } from '@/components/phucbm/jsdelivr'
import { getJsDelivrPackages } from '@/lib/getJsDelivrPackages'
 
export default async function ShowPackages() {
  const packages = await getJsDelivrPackages(
    ['flickity-responsive', 'cursorjs', 'scroll-snooper'],
    'phucbm',
    'month',
    1
  )
 
  const customRenderer = (pkg: JsDelivrPackage, periodText: string) => (
    <div className="p-4 border rounded-lg hover:bg-slate-50">
      <div className="flex items-start justify-between">
        <div>
          <h4 className="font-semibold">{pkg.name}</h4>
          <p className="text-sm text-slate-600">{pkg.description}</p>
        </div>
        <span className="text-blue-600 font-semibold">{pkg.hits.toLocaleString()} hits</span>
      </div>
      <a href={pkg.jsDelivrUrl} className="text-blue-500 text-sm hover:underline">
        View on jsDelivr →
      </a>
    </div>
  )
 
  return (
    <JsDelivrPackages
      packages={packages}
      statsPeriod="month"
      showBandwidth={true}
      showRankText={true}
      renderItem={customRenderer}
    />
  )
}

How It Works

Package Names Input – Pass an array of jsDelivr package names to display
jsDelivr API – Fetches real-time stats for each package from the jsDelivr CDN
Data Processing – Aggregates hits and bandwidth data for the specified time period
Sorting – Orders packages by hits/downloads in descending order
Rendering – Displays with configurable options and optional custom renderer

All API calls are cached with 1-hour revalidation for optimal performance.

Data Sources

jsDelivr API: https://data.jsdelivr.com/v1/stats/packages/gh/{namespace}/{packageName}

Notes

Pass package names directly to display; no GitHub API calls needed
Fetches real-time statistics directly from jsDelivr
Cached responses revalidate every 1 hour
No rate limiting concerns with GitHub API

Interactive Example

Explore jsDelivr packages from any GitHub user. Enter a username to see all public repositories and which ones are published on jsDelivr.

Try sindresorhus or locomotivemtl for popular packages:

Interactive Playground

3.5rem

1rem