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 https://ui.phucbm.com/r/jsdelivr.json

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

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.

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>
    );
}

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.