use-spotify

React hooks for the Spotify Web API.

Installation

yarn add use-spotify

npm install use-spotify

Usage

1. Wrap your components with a SpotifyApiProvider and pass it a valid access token. Read the Spotify Authorization Guide for more details.
2. Consume the useSpotify or useSpotifyLazy hooks.

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