Adding a JS function to ReactJS - Spotify Web Playback SDK

Question

I am trying to implement the Spotify Web Playback SDK in Node.js with ReactJS frontend. The Spotify Developer guide gives the following code (abbreviated to the important bit) to implement the SDK in HTML:

 <script src="https://sdk.scdn.co/spotify-player.js"></script> <script> window.onSpotifyWebPlaybackSDKReady = () => { const token = '[My Spotify Web API access token]'; const player = new Spotify.Player({ name: 'Web Playback SDK Quick Start Player', getOAuthToken: cb => { cb(token); } }); // Connect to the player! player.connect(); }; </script> 

I have managed to get the external script running by using react-load-script, but I cannot work out how to add the window.onSpotifyWebPlaybackSDKReady callback which is called when the SDK is ready.
Can anybody suggest how this would be best implemented?

SOLUTION: Thanks to Piotr Szlagura for the answer. The code that I found to work is shown below.

 import React, { Component } from 'react'; import Script from 'react-load-script'; import './App.css'; class App extends Component { constructor(props) { super(props); this.handleLoadSuccess = this.handleLoadSuccess.bind(this); this.handleLoadFailure = this.handleLoadSuccess.bind(this); this.cb = this.cb.bind(this); } componentDidMount() { window.onSpotifyWebPlaybackSDKReady = () => { this.handleLoadSuccess(); }; } handleLoadSuccess() { this.setState({ scriptLoaded: true }); console.log("Script loaded"); const token = '[My Spotify Web API access token]'; const player = new window.Spotify.Player({ name: 'Web Playback SDK Quick Start Player', getOAuthToken: cb => { cb(token); } }); console.log(player); // Error handling player.addListener('initialization_error', ({ message }) => { console.error(message); }); player.addListener('authentication_error', ({ message }) => { console.error(message); }); player.addListener('account_error', ({ message }) => { console.error(message); }); player.addListener('playback_error', ({ message }) => { console.error(message); }); // Playback status updates player.addListener('player_state_changed', state => { console.log(state); }); // Ready player.addListener('ready', ({ device_id }) => { console.log('Ready with Device ID', device_id); }); // Not Ready player.addListener('not_ready', ({ device_id }) => { console.log('Device ID has gone offline', device_id); }); // Connect to the player! player.connect(); } cb(token) { return(token); } handleScriptCreate() { this.setState({ scriptLoaded: false }); console.log("Script created"); } handleScriptError() { this.setState({ scriptError: true }); console.log("Script error"); } handleScriptLoad() { this.setState({ scriptLoaded: true}); console.log("Script loaded"); } render() { return ( <div className="App"> <header className="App-header"> <Script url="https://sdk.scdn.co/spotify-player.js" onCreate={this.handleScriptCreate.bind(this)} onError={this.handleScriptError.bind(this)} onLoad={this.handleScriptLoad.bind(this)} /> </header> </div> ); } } export default App; 

In summary, add the Spotify Web Playback SDK as a script tag in the render function and then connect the onSpotifyWebPlaybackSDKReady callback in componentDidLoad so that we know the required parts will have rendered/loaded.

Answer 1

I would suggest running this code in componentDidMount method of your component. If you use Server Side Rendering, you should also check if the window is present ( componentDidMount should not fire on server side but it's safer this way).

Basically in my experience I found out that every operation on window like adding event listeners etc, works fine if it is fired in componentDidMount .

Remember to remove this listener in componentWillUnmount to prevent memory leaks.