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.