# react-spotify-api

A component library that helps you interact with the Spotify API

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

Pass Spotify data with render props Use React.Context to pass the access token down the component tree

Use React.Context to pass the access token down the component tree Hooks!

Hooks! A demo page that uses this library - available here!

A demo page that uses this library - available here! Load more data support (infinite scrolling) - current works for some of the data types

Load more data support (infinite scrolling) - current works for some of the data types TypeScript support!

TypeScript support! 100% code coverage

100% code coverage Hooks for all data types from Spotify's API

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