KO
|
EN
gitlite — search
Search
#typescript
#ai-agents
#ai
#dsh-plugin
#deepseek-harness
#open-source
#claude-code
#codex
#cli
#developer-tools
#react
#windows
molstar-react
★ 30
Open GitHub ↗
Molstar as a react component
Download README (.md)
Explore Similar Repositories
BSL
:
Bootstrapped Unsupervised Sentence Representation Learning (ACL 2021)
Music-Triggers
:
This is a Minecraft mod that will allow you to set the music based on in game triggers
starlasu-python
:
No description available.
anomaly-detection-code-pattern
:
Sample Jupyter Notebook for playing around with the Anomaly Detection service to be made available on API Hub
View-Binding
:
View binding library for Unity. Built over UniMob
// repository documentation
Was this content helpful?
★ 0
(0 ratings)
Select Rating:
★
★
★
★
★
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
molstar-react
?
Download (.md)
# 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 Visualizer](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 ( <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. #### `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.
