A react component for adding the Molstar Macromolecular Visualiser to your app.

With npm:

npm install molstar-react

To use:

import Molstar from "molstar-react";

export const App = () => {

  return (
    <div>
      <Molstar pdbId="1LOL" />
    </div>
  );
}

export default App;

This will render a full page Molstar plugin, with the structure 1LOL loaded.

You can pre-load an official PDB structure by supplying its 4 letter ID as a prop.

You can also pre-load a structure by passing in the URL of the file - as long as it is a file type that Molstar supports.

By default the molstar plugin will take up the full screen. If you want it to act as just a normal div, you can provide a [width, height] array instead.

A class name to apply to the outer parent element.

3 August 2021

• Added ability to control dimensions rather than always being full-screen.
• Removed distinction between viewer and non-viewer.

16 July 2021

• Fixed re-render initialising.
• Component now disposes of viewer when removed.

13 July 2021

• Made distinction between Molstar Viewer and Molstar Core.
• Enabled custom viewer options.
• Added option to load structure from URL.
• Made pre-loading structure optional.

3 July 2021

• Basic full screen Molstar.
• Added fetching by PDB ID.