idanlo / react-spotify-api

A React component library that makes it easier to interact with the Spotify API

react-spotify-api

A component library that helps you interact with the Spotify API

Demo

Documentation

Features

• Components for most of Spotify's data types that pass data through render props
• Hooks for most of Spotify's data

Roadmap

• 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 - available here!
• Load more data support (infinite scrolling) - current works for some of the data types
• TypeScript support!
• 100% code coverage
• Hooks for all data types from Spotify's API
• Hooks for using the Spotify Playback SDK

Version 3.0.0 Breaking Change

Before version 3.0.0 the parameters to props.children were passed in this order - data, loading, error. It is now passed as an object, so you would now use the Album component like this -

<Album id={...}>
  {({ data }) => {
    return <></>;
  }}
</Album>

As opposed to the previous versions where you would use the components like this -

<Album id={...}>
  {(data, loading, error) => {
    return <></>;
  }}
</Album>

This way you can choose which parameters you would like to have, and if you want just the error parameter you can omit the other two. This works well with the loadMoreData parameter, you don't need to write all 4 parameters if you just need some of them.

Installing

with npm

npm install --save react-spotify-api

with yarn

yarn add react-spotify-api

Wrapping your app with a Provider

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

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!

Component usage

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}>
        {({ data, loading, error }) =>
          data ? (
            <div>
              <h1>{data.name}</h1>
              <ul>
                {data.genres.map(genre => (
                  <li key={genre}>{genre}</li>
                ))}
              </ul>
            </div>
          ) : null
        }
      </Artist>
    </SpotifyApiContext.Provider>
  );
}

Hooks usage (assuming the ExampleHooks component is wrapped with the 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;
}

Data types

• data - Each component has a link to the Spotify API endpoint where you can see the data model for that specific data type
• loading - Boolean (true when loading and false when finished loading)
• error - null when there are no errors but an object when there are - usually containing the error object received by the fetch api, so it looks something like: {status: 404, message: "Not Found"}

License

This project is licensed under the MIT License - see the LICENSE file for details

MIT © idanlo

react-spotify-api's Issues

QA: Can it be used with React Native?

This looks very promising I was wondering if it can be used with react-native and possibly expo.
I saw the html elements but they can be easily switched to the react native elements, is there anything that would stop this from working in react native and expo?
Thanks!

Distribution build uses a regeneratorRuntime function that doesn't exist

Hi,

It looks like you're using regeneratorRuntime in the compiled useApiRequest.js, probably via compilation from Babel.
From dist/ApiRequest/useApiRequest.js

function _loadData() {
    _loadData = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
      var res, _data;

      return regeneratorRuntime.wrap(function _callee$(_context) {
...

But regeneratorRuntime itself is not defined nor imported.
I think that you need to update your .babelrc to include an extra babel plugin

Hooks for all spotify types

add hooks for all spotify data types (user, playlist etc...)

I cannot seem to make any component working

When i try to implement any example component from the docs it never works. What am I doing wrong ?
Here's one of my component

import React from 'react';
import {Playlist} from "react-spotify-api"

function PlaylistComponent(props) {
    return (
        <Playlist id={props.id}>
            {({playlist}) => {
                return playlist ? <h3>{playlist.name}</h3> : null
            }}
        </Playlist>
    )
}

export default PlaylistComponent

not enough documentation and examples about loadMoreData

I have been trying to make loadMoreData work with my UserArtists component, but I really can't find many examples of how to use loadMoreData or even some documentation that could help me.

Demo on netlify appears to be down

https://react-spotify.netlify.app/ simply shows Not Found.

Typings - create index.d.ts file

create index.d.ts file with types for all components and hooks, maybe use @types/spotify-api (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/spotify-api) and @types/spotify-web-playback-sdk (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/spotify-web-playback-sdk)

Add documentation

Documentation for all components and hooks

Remove axios and use the fetch api instead

axios takes a large size of the package (almost 50%) and I do not have any special uses that require the use of axios (only query params but this can be done with fetch).

Improve Api Error Handling

@idanlo Thanks for the great work on this project!

Using the library I noticed it does not set an error state when the API returns a non-200 status code. The error JSON data is returned in the data field.

Reproduction:

import { SpotifyApiContext, Artist } from 'react-spotify-api';

<SpotifyApiContext.Provider value="bad_access_token">
  <Artist id="6eUKZXaKkcviH0Ku9w2n3V">
    {(artist, loading, error) => (
      <div>
        <p>Artist: {JSON.stringify(artist)}</p>
        <p>Error: {JSON.stringify(error)}</p>
        <p>Loading: {JSON.stringify(loading)}</p>
      </div>
    )}
  </Artist>
</SpotifyApiContext.Provider>

Result:

Artist: {"error":{"status":401,"message":"Invalid access token"}}

Error: false

Loading: false

I would like to propose setting an error object when encountered with the API or at the very least set to true. Do you have any thoughts on this? Happy to help 😄

Request token expires

I first want to say how nice this library has been so far! Thank you.

I have installed version 3.0.0 and have hit an issue with my token expiring. From the docs, I gained the impression that the library would handle refreshing the token itself as long as I provide one when initilizing the provider. Is this a bug or am I misreading the docs?