react-load-script icon indicating copy to clipboard operation
react-load-script copied to clipboard

Loading multiple, dependent scripts

Open stsomewheredesign opened this issue 7 years ago • 4 comments

Is it possible to load multiple, dependent scripts prior to executing any code in the handleScriptLoad() as shown in the example?

I tried using multiple <Script /> blocks in the desired dependency order, but that didn't seem to work out quite as expected.

stsomewheredesign avatar Jun 13 '18 19:06 stsomewheredesign

I thinke one way is to chain multiple Script tags in your render function, loading one at a time depending on the previous loaded state. This seems needlessly tricky, though.

reverie avatar Oct 22 '18 03:10 reverie

This is a pretty big pain right now, especially for projects like tinymce where you might be using a handful of plugin scripts.

reverie avatar Oct 22 '18 03:10 reverie

@reverie - did you ever get this working? I'm chaining 2 scripts using state to trigger re renders and only the first is being rendered.

hobadams avatar Jan 31 '19 21:01 hobadams

I've managed to make it work by changing the key props on the second script

<Script
 url={`https://firstScript`} 
 onLoad={this.onFirstScriptLoaded} 
/>
/* state dependent rendering */
<Script 
 key="secondScript" 
 url={`https://secondScript`} 
 onLoad={this.onSecondScriptLoaded} 
/>

I guess react thinks that the script component is the same and should not be updated so specifying a key props forces render

MathiasGilson avatar Aug 29 '19 10:08 MathiasGilson