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:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(file) {
    const canvasNode = this.canvas;
    const fileReader = new FileReader();
    
    fileReader.readAsArrayBuffer(event.target.files[0]);
    fileReader.onload = function() {
      const tiff = new Tiff({
        buffer: this.result
      });
      const canvas = tiff.toCanvas();
      canvasNode.appendChild(canvas);
    };
  
  }
  render() {
    return ( 
      <div>
        <label>
         Select TIFF file:
         <input type="file" onChange={this.onChange} />
        </label>
        <span ref={(canvas)=>this.canvas=canvas}/>
      </div>
    );
  }
}

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

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

<div id="root"></div>

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