spotify-connect
v1.7.0
Published
Get useful analytics from the spotify API in your React app
Downloads
26
Readme
spotify-connect
Integrate Spotify analytics into your React application to provide real-time analytics. This guide demonstrates how to use the Spotify API to retrieve and parse data on the currently playing track in your React or React Server Components application.
npm i spotify-connect
Currently supported APIs
Get currently playing track: Retrieve information about the track currently being played by a Spotify user.
Get recently played tracks: Retrieve the list of recently played tracks of a Spotify user.
Requirements
To get started, you'll need the following:
- client_id: Spotify app client ID
- client_secret: Spotify app client secret
- refresh_token: Spotify app refresh token. You can generate one as explained in various articles on the web. Example
Available Response Data Parsing Methods
The response from the Spotify API can be parsed using the following method:
parseCurrentTrack(data)
Returns:
{
track: {
id: item.id,
name: item.name,
artist: item.artists,
album: item.album.name,
image: item.album.images[0].url,
duration: item.duration_ms,
progress: progress_ms,
uri: item.uri,
},
timestamp,
}
Usage
- In the root of your application or wherever you want to use spotify-connect utilities, import the
SpotifyConnectContextProvider
.
<SpotifyConnectContextProvider
clientId={SPOTIFY_CLIENT_ID}
clientSecret={SPOTIFY_CLIENT_SECRET}
refreshToken={SPOTIFY_REFRESH_TOKEN}
>
- Now you can use the utilities in your components as follows.
const { data } = useCurrentTrack()
options: {
refetchInterval: (milliseconds, default = 5000 or 5seconds)
}