Molstar as a react component
npm install molstar-react![Npm Version][npm_url]
![downloads][npm_url]
![license][npm_url]

[npm_url]: https://www.npmjs.org/package/molstar-react
A react component for adding the Molstar Macromolecular Visualiser to your app.
With npm:
``bash`
npm install molstar-react
To use:
`jsx
import Molstar from "molstar-react";
export const App = () => {
return (
export default App;
`
This will render a full page Molstar plugin, with the structure 1LOL loaded.
#### 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.
#### file
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).
#### 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.
#### showAxes
If true, axes will appear in the bottom left corner.
13 May 2024
- 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.