A component library that helps you interact with the Spotify API
- Components for most of Spotify's data types that pass data through render props
- Hooks for most of Spotify's data
- Pass Spotify data with render props
- Use React.Context to pass the access token down the component tree
- Hooks!
- A demo page that uses this library
- TypeScript support!
- 100% code coverage
- Hooks for all data types from Spotify's API
- Hooks for using the Spotify Playback SDK
npm install --save react-spotify-api
yarn add react-spotify-api
in order to use the Spotify API you are required to send an access token (read more here)
with every single http request, but the SpotifyApiContext
provider does that for you!
import { SpotifyApiContext } from 'react-spotify-api'
Wrap your app with it (all react-spotify-api components must have a SpotifyApiContext.Provider parent)
<SpotifyApiContext.Provider value={token}>
<App />
</SpotifyApiContext.Provider>
You can now use all components without worrying about getting your access token!
import React, { Component } from 'react'
import { SpotifyApiContext, Artist } from 'react-spotify-api'
function Example(props) {
return (
<SpotifyApiContext.Provider value={props.token}>
<Artist id={props.id}>
{(artist, loading, error) =>
artist ? (
<div>
<h1>{artist.name}</h1>
<ul>
{artist.genres.map(genre => (
<li key={genre}>{genre}</li>
))}
</ul>
</div>
) : null
}
</Artist>
</SpotifyApiContext.Provider>
)
}
import React from 'react'
import { useArtist } from 'react-spotify-api'
function ExampleHooks(props) {
const {data, loading, error} = useArtist(props.id);
return (
artist ? (
<div>
<h1>{artist.name}</h1>
<ul>
{artist.genres.map(genre => (
<li key={genre}>{genre}</li>
))}
</ul>
</div>
) : null
)
}
This project is licensed under the MIT License - see the LICENSE file for details
MIT © idanlo