Installation
React
Integrate Model Viewer into your React application.
React v19 required
Use this package with react@19 and react-dom@19. For React 18 or earlier, use @neurodyn/model-viewer.
Install
Add the React package to your application with your preferred package manager.
pnpm add @neurodyn/react-model-viewernpm install @neurodyn/react-model-vieweryarn add @neurodyn/react-model-viewerbun add @neurodyn/react-model-viewerRender the Dialog
ModelViewerDialog is a controlled component. Render it from a client component and pass the object data that should open in the viewer.
'use client'
import { useState } from 'react'
import { ModelViewerDialog } from '@neurodyn/react-model-viewer'
export function App() {
const [open, setOpen] = useState(false)
return (
<>
<button type="button" onClick={() => setOpen(true)}>
Open viewer
</button>
<ModelViewerDialog
open={open}
onOpenChange={setOpen}
apiKey="..."
tinuuid="..."
/>
</>
)
}Inline viewer
To show the model on the page, use ModelViewer:
'use client'
import { ModelViewer } from '@neurodyn/react-model-viewer'
export function InlineModelViewer() {
return (
<div style={{ height: 480 }}>
<ModelViewer
apiKey="..."
tinuuid="..."
/>
</div>
)
}Next steps
- Read the React API reference.