Molstar React Component

A Molstar react component to display pdb file in molstar view. Takes in the path of the pdb file and renders it to the browser.

Features

• Displays pdf file in molstar view
• Change polymer view of the pdb
• Color the pdb strucuture using different properties

Installation

You can install the Molstar component via npm:

npm install react-pdb-molstar

Usage

• To Display the pdb file in 3D format using molstar, Also to display protein structures
• Change Polymer/structure of the 3D model for better understanding | (polymer)
• Color it using different properties and study the structure | (property)
• Extend the view to access all molstar features

Note: Store the pdb files in the public folder or a place where you can pass the path of the pdf file to the path prop

Example

import { Molstar } from 'react-pdb-molstar'

function App() {
  return (
    <>
        <Molstar
            path={`/pdb/Agan1_HL.pdb`}
            height='800px'
            polymer='label'
            property='hydrophobicity'
        />
    </>
  );
}

export default App;

Component

    <Molstar
      path={`/pdb/Agan1_HL.pdb`}
      height='800px'
      polymer='label'
      property='hydrophobicity'
    />

Polymer prop

• ball-and-stick
• cartoon
• backbone
• carbohydrate
• ellipsoid
• gaussian-surface
• gaussian-volume
• label
• line
• molecular-surface
• orientation
• point
• putty
• spacefill

Property prop

• atom-id
• carbohydrate-symbol
• cartoon
• chain-id
• element-index
• element-symbol
• entity-id
• entity-source
• external-volume
• formal-charge
• hydrophobicity
• illustrative
• model-index
• molecule-type
• occupancy
• operator-hkl
• operator-name"
• partial-charge
• polymer-id
• polymer-index
• residue-name
• secondary-structure
• sequence-id
• shape-group
• structure-index
• trajectory-index
• uncertainty
• uniform
• unit-index
• volume-segment
• volume-value

Props

| Prop | Type | Required | Default | Description | |---|---|---|---|---| | path | string | ✅ | N/A | displays pdb file in the browser | The array of objects containing the data to be displayed in the table. | | polymer | string | ❌ | "molecular-surface" | sets the polymer in molstar view | | | property | string | ❌| "hydrophobicity" | colors the 3D structure according to the property | height | string | ❌ | 600px | Height of the component