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 />
</div>
);
}
export default App;
This will render a blank, full page interface, from which you upload a file to view, or download using a PDB code.
You can pre-load an official PDB structure by supplying its 4 letter ID as a prop. By default these are downloaded from PDBe, but this can be customised using the Molstar options (see below).
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.
The initial settings and state of the viewer are set using an options object, which has some defaults set by Molstar itself. Some useful options are:
layoutShowSequence
- show the polymer sequences along the top (defaulttrue
).layoutShowLeftPanel
- show the state tree on the left (defaulttrue
).collapseLeftPanel
- minimise the state tree on the left, but make it togglable (defaultfalse
).layoutShowLog
- show the event log on the bottom (defaulttrue
).layoutShowControls
- show controls around the edges (combination of above, defaulttrue
).pdbProvider
- where PDBs will be downloaded from (default"pdbe"
).
By default the molstar viewer 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.
import Molstar from "molstar-react";
export const App = () => {
const options = {
pdbProvider: "rcsb",
layoutShowLog: false,
layoutShowSequence: false
}
return (
<div>
<Molstar pdbId="1XDA" options={options} dimensions={[800, 600]} />
</div>
);
}
export default App;
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.