A React component for adding the Molstar Macromolecular Visualizer 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.

Thirdly, you can provide a file object, which should have a filestring property and a type property ("pdb", "mmcif" etc. - anything that Molstar itself natively 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.

If true, the full Molstar interface will be used around the core canvas.

If true and useInterface is true, the controls will be shown around the sides of the interface. Only recommended for large sizes.

If true, axes will appear in the bottom left corner.

13 May 2023

• Fixed 'Invalid data cell' issue.
• Fixed duplicate fetch issue.

26 April 2022

• Fixed issue where ?key=value params in URLs would break extension parsing.

4 March 2022

• Added option to provide filestring directly.
• Added option to toggle axes in bottom left corner.

29 January 2022

• Now uses Plugin and PluginUI directly instead of Viewer.
• Class name prop.
• Plugin now clears first when pdbId/URL prop changes.

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.