https://github.com/samirelanduk/molstar-react
Molstar as a react component
https://github.com/samirelanduk/molstar-react
bioinformatics molstar pdb protein-visualization react structural-bioinformatics
Last synced: 7 months ago
JSON representation
Molstar as a react component
- Host: GitHub
- URL: https://github.com/samirelanduk/molstar-react
- Owner: samirelanduk
- License: isc
- Created: 2021-06-29T22:25:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-18T21:28:46.000Z (over 2 years ago)
- Last Synced: 2025-02-28T23:46:33.005Z (7 months ago)
- Topics: bioinformatics, molstar, pdb, protein-visualization, react, structural-bioinformatics
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/molstar-react
- Size: 228 KB
- Stars: 26
- Watchers: 5
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Molstar React
[][npm_url]
[][npm_url]
[][npm_url]
[](https://twitter.com/samirelanduk)
[npm_url]: https://www.npmjs.org/package/molstar-react
A react component for adding the [Molstar Macromolecular Visualiser](https://github.com/molstar/molstar) to your app.
## Installation
With npm:
```bash
npm install molstar-react
```
## Basic Use
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.
### 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.
#### `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.
## Changelog
### Release 0.5.2
*13 May 2023*
- Fixed 'Invalid data cell' issue.
- Fixed duplicate-fetch issue.
### Release 0.5.1
*26 April 2022*
- Fixed issue where `?key=value` params in URLs would break extension parsing.
### Release 0.5.0
*4 March 2022*
- Added option to provide filestring directly.
- Added option to toggle axes in bottom left corner.
### 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.