How to load an external scripts

Hello,

Today I’m try to use the react-storybook for building a component thats use the SDK of Facebook. I will try something like this:

componentWillMount() {
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

And I did not succeed. The script loads up if I see on the network of browser. But it is not accessible through the console or even within React functions.

I believe it can be related to how the encapsulation react-storybook works.

[3mcd]

Leaving this snippet here for anyone who may have a similar need to load scripts per-story:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Script extends Component {
  static propTypes = {
    src: PropTypes.string.isRequired,
  };

  state = {
    loaded: false,
  };

  componentWillMount() {
    const head = document.querySelector('head');
    const script = document.createElement('script');

    script.async = true;
    script.src = this.props.src;
    script.onload = () => this.setState({
      loaded: true,
    });

    head.appendChild(script);
  }

  render() {
    return this.state.loaded ? this.props.children : null;
  }
}

const loadScriptDecorator = src => story => <Script src={src}>{story()}</Script>;

export default loadScriptDecorator;

[jonnybot0]

I need something like what @adamellsworth described, but his code didn’t seem to work. While I didn’t get any errors, my stories weren’t actually loaded at runtime.