## Install `npm install spotify-web-playback-sdk-for-react`
npm install spotify-web-playback-sdk-for-reactnpm install spotify-web-playback-sdk-for-reactTS
import { SpotifyWebSDK } from "spotify-web-playback-sdk-for-react";
getOAuthToken={(cb) => cb("token")}
volume=0.5
enableMediaSession=true
>
`
: name of the Spotify instance.getOAuthToken: The callback getOAuthToken expected to provide a valid access_token.volume: The volume of the player represented as a decimal value between 0 and 1.enableMediaSession: If set to true, the Media Session API will be set with metadata and action handlers. Default value is false.Given valid token and run the code, you should see a device named
name from the official Spotify app.Refer to https://developer.spotify.com/documentation/web-playback-sdk/tutorials/getting-started
Hooks
All the hooks should be used in child components of SpotifyWebSDK$3
Return current player instance object which can manipulate the player, can be null.Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#spotifyplayer
TS
function Control() {
const player = useSpotifyPlayer();
return (
)
}
`$3
Return the device id of current player instance, can be null.
Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybackplayer-object
TS
function Device() {
const device = useSpotifyDevice();
return (
{device id: ${device?.device_id}
)
}`$3
Return current state of the player, can be null.Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybackstate-object
TS
function State() {
const state = useSpotifyState();
return (
{state.paused ? "paused" : "playing"}
)
}
`
---The following hooks are actually attributes extracted from the state, just for convinient
$3
Return current playing track, can be null.Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybacktrack-object
TS
function CurrentTrack() {
const currentTrack = useCurrentTrack()
return (
{currentTrack?.name}
)
}
``