Skip to content
A React component library that makes it easier to interact with the Spotify API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public use create-react-app and store all library code in src/lib Feb 10, 2019
src
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
styleguide.config.js

README.md

react-spotify-api

A component library that helps you interact with the Spotify API

NPM Build Status Dependencies Dev Dependencies Peer Dependencies Codecov npm bundle size (minified) GitHub PRs Welcome

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
  • TypeScript support!
  • 100% code coverage
  • Hooks for all data types from Spotify's API
  • Hooks for using the Spotify Playback SDK

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

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

License

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

MIT © idanlo

You can’t perform that action at this time.