moorhen_molecular_graphics_container_react_redux_setup.ts

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import { MoorhenContainer } from 'moorhen';
4import { Provider } from 'react-redux';
5import { store } from 'moorhen';
6
7// Note: Moorhen requires its own CSS to be loaded for proper layout
8import 'moorhen/dist/moorhen.css';
9
10const App: React.FC = () => {
11  return (
12    <div style={{ height: '100vh', width: '100vw' }}>
13      <Provider store={store}>
14        <MoorhenContainer 
15          forwardControls={(controls) => {
16            console.log('Moorhen controls initialized', controls);
17          }}
18          allowDevelopment={true}
19          viewOnly={false}
20        />
21      </Provider>
22    </div>
23  );
24};
25
26const rootElement = document.getElementById('root');
27if (rootElement) {
28  const root = ReactDOM.createRoot(rootElement);
29  root.render(<App />);
30}