OV25 Configurator

A standalone 3D configurator component extracted from the OV25 platform that can be embedded as an iframe or used as a React component.

Installation

npm install ov25-configurator

Usage

As a React Component

Note: This component is self-contained and includes all necessary providers internally. Make sure you have Tailwind CSS configured in your app.

import { IframeConfigurator, type IFrameConfiguratorData } from 'ov25-configurator'

const configuratorData: IFrameConfiguratorData = {
  products: [
    {
      id: 1,
      name: "Your Product",
      configurator: {
        id: "configurator-1",
        name: "Product Configurator",
        configuratorOptions: [],
        configuratorSelections: [],
        configuratorGroups: [],
        selectedSelections: [],
        defaultState: []
      }
    }
  ]
}

function App() {
  return (
    <div className="w-full h-screen">
      <IframeConfigurator 
        data={configuratorData} 
        orgId={1} 
        useThumbnail={true}
      />
    </div>
  )
}

Props

• data: IFrameConfiguratorData - The configurator data containing products and configuration
• orgId: number | undefined - Organization ID for analytics
• useThumbnail?: boolean - Whether to show loading thumbnail (default: true)

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

# Build standalone app
npm run build

License

MIT