@buerli.io/react

React bindings for buerli: a component opens a drawing by name, runs the ClassCAD API on it and renders the drawing's geometry in a react-three-fiber Canvas. Connect first with init from @buerli.io/classcad.

What it exposes

• useBuerliCadFacade: opens a drawing by name and returns its API, its facade and a Geometry component.
• BuerliGeometry: renders a drawing's geometry, and lets the user select it.
• useBuerli and useDrawing: select a part of buerli's state, or of a drawing's, and render again when it changes.
• PluginManager, BuerliPluginsGeometry and usePlugin: run the plugins of a drawing, such as the feature dialogs of @buerli.io/react-cad.
• elements: the form controls plugins are made of, which an app can replace.

Example

import { Canvas } from '@react-three/fiber'
import { init, WASMClient } from '@buerli.io/classcad'
import { useBuerliCadFacade } from '@buerli.io/react'

init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }))

// Opens the drawing `box`, builds a box of 100 mm in it, and shows it
function Box() {
  const { Geometry } = useBuerliCadFacade('box', async (api) => {
    await api.v1.common.clear()
    const part = await api.v1.part.create({ name: 'Box' })
    await api.v1.part.box({ id: part, width: 100, length: 100, height: 100 })
  })
  return <Geometry />
}

export const App = () => (
  <Canvas>
    <Box />
  </Canvas>
)

API

Name	Description
Hooks	Open a drawing in a component and read buerli's state. Start with useBuerliCadFacade.
Components	What renders a drawing in a react-three-fiber Canvas, and shows buerli's messages.
Plugins	For apps with plugins, such as the feature dialogs of @buerli.io/react-cad: mount PluginManager once and render BuerliPluginsGeometry in the scene.
UI Elements	The form controls plugins are made of, which an app passes to init and may replace.

Advanced

Most apps do not need these directly: types they meet through the exports above, and what is there for special cases or for building on buerli itself.

Name	Description
Helpers	Conversions between the scene and the canvas, for apps that draw their own 3D overlays.