Vizbl
Installation

React

Integrate Room 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/room-viewer.

Install

Add the React package to your application with your preferred package manager.

pnpm add @neurodyn/react-room-viewer
npm install @neurodyn/react-room-viewer
yarn add @neurodyn/react-room-viewer
bun add @neurodyn/react-room-viewer

Render the Dialog

RoomViewerDialog is a controlled component. Render it from a client component and pass the resource data that should open in the viewer.

'use client'

import { useState } from 'react'
import { RoomViewerDialog } from '@neurodyn/react-room-viewer'

export function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open viewer
      </button>

      <RoomViewerDialog
        open={open}
        onOpenChange={setOpen}
        type="poster"
        src="https://placehold.co/800x1200.png"
        name="Sample Print"
        width={1}
        height={1.5}
      />
    </>
  )
}

Next steps