Node Packaged Masterfully

    TypeScript icon, indicating that this package has built-in type declarations

    0.11.1 • Public • Published


    npm version CI Maintainability Test Coverage

    A Spotify player with Spotify's Web Playback SDK.

    View the demo

    Check the supported browser list. This library will try to use the user's devices to work with unsupported browsers.


    npm i react-spotify-web-playback

    Getting Started

    import SpotifyPlayer from 'react-spotify-web-playback';


    autoPlay: boolean
    Start the player immediately.

    callback: (state) => any
    Get status updates from the player. Check CallbackState in the types for the state structure.

    initialVolume number between 0 and 1. default 1
    The initial volume for the player. It's not used for external devices.

    locale Locale
    The strings used for aria-label/title attributes.

    Type Definition
    interface Locale {
      devices?: string; // 'Devices'
      next?: string; // 'Next'
      pause?: string; // 'Pause'
      play?: string; // 'Play'
      previous?: string; // 'Previous'
      removeTrack?: string; // 'Remove from your favorites'
      saveTrack?: string; // 'Save to your favorites'
      title?: string; // '{name} on SPOTIFY'
      volume?: string; // 'Volume'

    magnifySliderOnHover: boolean
    Magnify the player's slider on hover.

    name string default: Spotify Web Player
    The name of the player.

    offset number
    The position of the list/tracks you want to start the player.

    persistDeviceSelection boolean
    Save the device selection.

    play boolean
    Control the player's status

    showSaveIcon boolean
    Display a Favorite button. It needs additional scopes in your token.

    styles object
    Customize the player's appearance. Check StylesOptions in the types.

    syncExternalDevice boolean
    If there are no URIs and an external device is playing, use the external player context.

    syncExternalDeviceInterval number default: 5
    The time in seconds that the player will sync with external devices.

    token string REQUIRED
    A Spotify token. More info below.

    updateSavedStatus (fn: (status: boolean) => any) => any
    Provide you with a function to sync the track saved status in the player.
    This works in addition to the showSaveIcon prop, and it is only needed if you keep track's saved status in your app.

    uris string | string[]
    A list of Spotify URIs.

    Spotify Token

    It needs a Spotify token with the following scopes:

    • streaming
    • user-read-email
    • user-read-private
    • user-read-playback-state (to read other devices' status)
    • user-modify-playback-state (to update other devices)

    If you want to show the Favorite button (💚), you'll need the additional scopes:

    • user-library-read
    • user-library-modify

    Please refer to Spotify's Web API docs for more information.

    This library doesn't handle token generation and expiration. You'll need to handle that by yourself.


    You can customize the UI with a styles prop. Check all the available options here.

      // ...
        activeColor: '#fff',
        bgColor: '#333',
        color: '#fff',
        loaderColor: '#fff',
        sliderColor: '#1cb954',
        trackArtistColor: '#ccc',
        trackNameColor: '#fff',



    If you find a bug, please file an issue on our issue tracker on GitHub.




    npm i react-spotify-web-playback

    DownloadsWeekly Downloads






    Unpacked Size

    495 kB

    Total Files


    Last publish


    • gilbarbara