Use-spotify-web-playback-sdk NPM

`use-spotify-web-playback-sdk`

React hook for interacting with the Spotify Web Playback SDK.
Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final.
You'll need to install react, react-dom, etc at ^16.7.0-alpha.0

Install

yarn add use-spotify-web-playback-sdk

Usage

import useSpotifyWebPlaybackSdk from "use-spotify-web-playback-sdk";

function MyComponent() {
  const {
    Script: WebPlaybackSdkScript,
    deviceId,
    connect: connectWebPlaybackSdk,
    player, // https://developer.spotify.com/documentation/web-playback-sdk/reference/#api-spotify-player
    isReady,
  } = useSpotifyWebPlaybackSdk({
    name: "My Spotify Player", // Device that shows up in the spotify devices list
    getOAuthToken: () => Promise.resolve(sessionStorage.getItem("accessToken")), // Wherever you get your access token from
    onPlayerStateChanged: (playerState) => {
      console.log('player state changed:', playerState);
    }
  });

  React.useEffect(
    () => {
      if (isReady) {
        connect();
      }
    },
    [isReady],
  );

  // value == ...
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
    <WebPlaybackSdkScript>
      <div>Any children</div>
    </WebPlaybackSdkScript>
    </React.Suspense>
  );
}

Also check out the TypeScript definitions for all options that can be passed to the hook