The correct way to implement IGV.js in React

Question

I'm trying to use IGV.js in React and discovered that the following code creates two container divs instead of one:

var igvDiv = document.getElementById("igv-div");
var options =
{
    genome: "hg38",
    locus: "chr8:127,736,588-127,739,371",
    tracks: [
        {
            "name": "HG00103",
            "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
            "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
            "format": "cram"
        }
    ]
};

igv.createBrowser(igvDiv, options)
        .then(function (browser) {
            console.log("Created IGV browser");
        })

My React code is better using useRef:

import React, { useRef, useEffect, Component } from 'react';

import igv from 'igv';

var igvStyle = {
  fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    paddingTop: '60px',
    margin: '5px'
  }
  class IGViewerSection extends Component {

    componentDidMount() {
      var igvContainer = document.getElementById('igv-div');
      var igvOptions = {
        genome: "hg38",
        locus: "chr8:127,736,588-127,739,371",
        tracks: [
            {
                "name": "HG00103",
                "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
                "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
                "format": "cram"
            }
        ]
    };
      return igv.createBrowser(igvContainer, igvOptions);
    }
  
    render() {
      return (
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

export default IGViewerSection;

I want to implement IGV.js in React using the correct approach. Could you please guide me how to properly implement IGV.js in React and how to fix it

Answer 1

Here is the correct version, you can use the ref attribute to attach your ref object to the component and it will be available when the component is mounted.

import React, { createRef, Component } from 'react';
import igv from 'igv';

const igvStyle = {
  fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
  paddingTop: '60px',
  margin: '5px'
}

class IGViewerSection extends Component {
  constructor(props) {
    super(props)
    this.container = createRef(null)
  }

  componentDidMount() {
    const igvOptions = {
      genome: "hg38",
      locus: "chr8:127,736,588-127,739,371",
      tracks: [
        {
          "name": "HG00103",
          "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
          "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
          "format": "cram"
        }
      ]
    };
    return igv.createBrowser(this.container.current, igvOptions);
  }

  render() {
    return (
      <div id="igv-div" ref={this.container} style={igvStyle}></div>
    );
  }
}
  

export default IGViewerSection;