Molstar React Component

A React wrapper for the well known Molstar viewer (https://github.com/molstar/molstar). Additionally it has inbuilt functionality to focus on specific residues (and chains) and to retrieve the surroundings of the focused structures.

Usage

Provide a 4-letter pdb id and a residue id (additionally a chain can be supplied) to focus. The component will load the structure and then automatically focus on the residue. Note that the parent element of this component needs to be positioned 'absolute' to correctly work. Also the css needs to be imported for the controls to be displayed correctly. See below for a minimal working example:

export function MolstarTest() {
    return <div>
      <div style={{
        // Make the parent element have position: absolute
        position: 'absolute',
        width: 500,
        height: 500
      }}>
        <MolstarReact
          // 4 letter pdb id
          pdbId="7bv2"

          // Residue id to focus
          ligandName="F86"

          // Optional chain id
          chainName="P"

          // Callback when residues get queried
          onFocusLigand={(residues) => {
            console.log(residues)
          }}
        ></MolstarReact>
      </div>
  </div>
}

Build Instructions