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.
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>
}