React: How Could We Use An External Library As A Script, Into A Class Or Functional Component? Is It Possible?

Hello and than you for reading this question! I have a use case which I have to load a TIFF image. So then I have researched how to use this library: https://github.com/seikichi/ti

Solution 1:

Load the function in onChange handler and put the corresponding html in render() method:

classAppextendsReact.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(file) {
    const canvasNode = this.canvas;
    const fileReader = newFileReader();
    
    fileReader.readAsArrayBuffer(event.target.files[0]);
    fileReader.onload = function() {
      const tiff = newTiff({
        buffer: this.result
      });
      const canvas = tiff.toCanvas();
      canvasNode.appendChild(canvas);
    };
  
  }
  render() {
    return ( 
      <div><label>
         Select TIFF file:
         <inputtype="file"onChange={this.onChange} /></label><spanref={(canvas)=>this.canvas=canvas}/>
      </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById("root"));

<scriptsrc="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="root"></div>

We are using ref which is the React recommended way to selecting nodes from the DOM if we needed to do that.