@lhagfoss/spotify

A small React now-playing component plus a server-side Spotify helper. It works with Next.js, Bun, and other React setups that expose an API route.

Install

bun add @lhagfoss/spotify

1. Add the server route (Next.js App Router)

// app/api/spotify/route.ts
import { spotifyNowPlayingResponse } from "@lhagfoss/spotify/server";

export async function GET() {
  return spotifyNowPlayingResponse({
    clientId: process.env.SPOTIFY_CLIENT_ID!,
    clientSecret: process.env.SPOTIFY_CLIENT_SECRET!,
    refreshToken: process.env.SPOTIFY_REFRESH_TOKEN!,
  });
}

Keep these environment variables server-side—never prefix them with NEXT_PUBLIC_:

SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REFRESH_TOKEN=

The refresh token must have Spotify's user-read-currently-playing scope.

2. Render the component

import { SpotifyNowPlaying } from "@lhagfoss/spotify";

export function Listening() {
  return <SpotifyNowPlaying />;
}

The component ships with minimal inline styling, inherits your text color, handles loading and idle states, and refreshes once per minute.

<SpotifyNowPlaying
  endpoint="/api/spotify"
  refreshInterval={30_000}
  className="my-spotify-card"
  label="Listening now"
  idleText="Nothing playing"
  showArtwork
/>

For completely custom markup, use the hook:

import { useSpotifyNowPlaying } from "@lhagfoss/spotify";

const { data, loading, error } = useSpotifyNowPlaying();

Security

The React component only calls your API endpoint. Your Spotify client secret and refresh token stay in the server route. The helper returns a quiet state when Spotify has no active track or is temporarily unavailable.

Publish

npm login
npm publish --access public

The @lhagfoss npm account or organization must exist and your npm user must have permission to publish to it.