use-spotify 
React hooks for the Spotify Web API.
Installation
yarn add use-spotify
npm install use-spotifyUsage
- Wrap your components with a
SpotifyApiProviderand pass it a valid access token. Read the Spotify Authorization Guide for more details. - Consume the
useSpotifyoruseSpotifyLazyhooks.
API
Underneath the hood use-spotify utilizes Spotify Web API JS.
- The first parameter to the hooks is any spotify method name.
- The second parameter is options.
- The third parameter is a list of arguments specific to the spotify method.
Further documentation for each method and its arguments can be found at the Spotify Web API JS documentation or in the Spotify Web API Reference.
const result = useSpotify(spotifyMethod, options, ...args)
const [invoke, result] = useSpotifyLazy(spotifyMethod, options, ...args)
await invoke()
await invoke(overrideOption, ...overrideArgs)Examples
Provider
import { useSpotify, SpotifyApiProvider } from 'use-spotify';
const App = () => {
return (
<SpotifyApiProvider accessToken={'token goes here'}>
<MyTopArtists/>
<Search />
</SpotifyApiProvider>
);
};Simple hook usage
import { useSpotify } from 'use-spotify';
const MyTopArtists = () => {
const myTopArtists = useSpotify('getMyTopArtists');
if (myTopArtists.loading) {
return 'Loading';
}
return myTopArtists.data.artists.items.map(x => (
<div key={x.id}>
{x.name}
</div>
))
}Passing arguments to a hook
import { useSpotify } from 'use-spotify';
const Search = () => {
const search = useSpotify(
'search',
{
limit: 5,
},
'The National',
['artist', 'album']
);
if (search.loading) {
return 'Loading';
}
return search.data.artists.items.map(x => (
<div key={x.id}>
{x.name}
</div>
))
}Passing arguments to a lazy hook
import { useSpotifyLazy } from 'use-spotify';
const SearchLazy = () => {
const [search, results] = useSpotifyLazy(
'search',
);
useEffect(() => {
(async () => {
const searchResults = await search(
{
limit: 5,
},
'The National',
['artist', 'album']
);
})()
}, [])
if (results.loading) {
return 'Loading';
}
return results.data.artists.items.map(x => (
<div key={x.id}>
{x.name}
</div>
))
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent