SOS

Shane O'Sullivan's technical blog… really ties the room together

ReactDependentScript – Load 3rd party scripts first

Posted by Shane O'Sullivan on October 30, 2017

I’ve come up against a common problem when writing React components that depend on a 3rd party JS and CSS files.

Do I load these 3rd party files every time, and pay the performance cost, or manually hack a way to load them when my component is first used?

I decided to fix this properly, which has resulted in a simple React component I’ve open sourced called ReactDependentScript.  You simply wrap your components in <ReactDependentScript …. >, telling it what JS and CSS files to load, and it loads them first, and only when they successfully load does it render the child components.

It also supports taking a function prop to call to render the child components lazily.

For example, you can load jQuery, and then render jQuery plugins or simply use the $ function.

Screen Shot 2017-10-30 at 15.23.38

You can do more interesting things like load the Stripe JS code for their Checkout flow.

Screen Shot 2017-10-30 at 15.25.56

Have a play with it at https://github.com/shaneosullivan/ReactDependentScript, it’s MIT licensed so use it as you wish.  Please feel free to provide feedback or changes through Github.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: