65

GitHub - idanlo/react-spotify-api: A React component library that makes it easie...

 5 years ago
source link: https://github.com/idanlo/react-spotify-api
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

react-spotify-api

This is a component library that helps you interact with the Spotify API

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

Documentation

Install

npm install --save 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> 
    )
    console.log()
}

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

MIT © idanlo


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK