Miew is a high performance web tool for advanced visualization and manipulation of molecular structures.
The miew-react package contains only a React.js wrapper component.
Please refer to the topmost README for an overview of the entire project.
The component is available as an npm package.
# npm create vite@latest .
npm i miew-reactsrc/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Viewer from 'miew-react';
createRoot(document.getElementById('root')).render(
<StrictMode>
<Viewer options={{ load: '1crn' }} />
</StrictMode>,
);index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="root" style="width:640px; height:480px"></div>
<script type="module" src="src/main.jsx"></script>
</body>
</html>The component accepts the following optional props:
- onInit: a callback function which recieves an instance of Miew, and called after initialization of Miew instance inside the Viewer component. With a help of this prop you can access Miew methods and fields.
- options: an object containing representation settings for Miew and initial structure to be shown (all the fields are also optional, when not provided, default settings are applied)
- theme: ignored
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.
Copyright (c) 2015–2024 EPAM Systems, Inc.