README

Molstar React

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

Installation

With npm:

npm install molstar-react

Basic Use

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.

Props

`pdbId`

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

`url`

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.

`dimensions`

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.

`className`

A class name to apply to the outer parent element.

`useInterface`

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

`showControls`

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

Changelog

Release 0.4.0

29 January 2022

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

Release 0.3.0

3 August 2021

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

Release 0.2.1

16 July 2021

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

Release 0.2.0

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.

Release 0.1.0

3 July 2021

Basic full screen Molstar.
Added fetching by PDB ID.

Usage no npm install needed!