Configurio

The library provides hook and components for custom rendering of 3d configurator. Create your configurator here.

Installation

Install configurio with npm or yarn

  npm install @rromikas/configurio three
  yarn add @rromikas/configurio three

Usage

import { useConfigurio } from '@rromikas/configurio';
import configurator from "./configurator.json";

function App() {

  const {
      modelViewer, // 3d model React element which fills container size
      options, // Color and materials options
      userSelections // array of selected options and their parent option
      } = useConfigurio(configurator)

  return  <div style={{width: 800, height: 400, display:"flex"}}>
            <div style={{flexGrow: 1}}>{modelViewer}</div>
            <div style={{width: 300, flexShrink:0}}>{options.map(option => {...})}</div>
          </div>
}