@jbaysolutions/floorplan-react

Website · Live demo · Documentation

JBay Floorplan for React 18 and 19: a floor plan editor, 2D viewer and 3D viewer as React components. They are built on @jbaysolutions/floorplan-elements (installed with this package), which has Vue bundled inside; your app doesn't need Vue.

npm install @jbaysolutions/floorplan-react
npm install three   # only for the 3D viewer

import { useRef, useState } from 'react'
import { FloorplanEditor, FloorplanViewer, type FloorplanViewerElement } from '@jbaysolutions/floorplan-react'

function Building() {
  const [plan, setPlan] = useState(initialPlan)
  const [markers, setMarkers] = useState(initialMarkers)
  const viewer = useRef<FloorplanViewerElement>(null)

  return (
    <>
      <FloorplanEditor plan={plan} onChange={setPlan} style={{ height: 600 }} />
      <FloorplanViewer
        ref={viewer}
        plan={plan}
        markers={markers}
        theme="paper"
        markersDraggable
        onPlanClick={({ x, y, room }) => console.log(x, y, room?.name)}
        onMarkerMove={({ marker, x, y }) => setMarkers((ms) => ms.map((m) => (m.id === marker.id ? { ...m, x, y } : m)))}
        renderMarker={(marker, { selected }) => <MyPin marker={marker} selected={selected} />}
        style={{ height: 600 }}
      />
      <button onClick={() => viewer.current?.focusMarker('ap-1')}>Show AP 1</button>
    </>
  )
}

// 3D: a separate entry, so three.js only loads where it's used
import { FloorplanViewer3D } from '@jbaysolutions/floorplan-react/3d'

• Props are the elements' properties (plan, markers, floor, theme, showFurniture…), plus className, style, id, data-* and aria-*. A prop is passed to the component only when its value changes, so what the component changes itself (the plan being edited, the floor shown) stays as it is until you pass something new.
• Callbacks get plain values: onChange(plan), onFloorChange(floor), onPlanClick(e), onMarkerClick(marker, event), onMarkerMove(e), onRoomHover(room), onModeChange(mode)…
• Methods are on the ref, which is the element: fit(), focusMarker(), setFloor(), undo(), snapshot()…
• renderMarker draws markers with your own React components.
• Packs register with registerPack (and registerPack3D from /3d); the data helpers (createEmptyPlan, normalizePlan, formatArea…) are exported too.
• Server rendering: the components are marked 'use client'. They render an empty element on the server and start in the browser.

Documentation: the React guide, and the full documentation for every prop, callback and method. For Vue 3 apps, use @jbaysolutions/floorplan-vue.

Licence

Free for open-source projects and for companies with under €1M yearly revenue, including in production. Other companies buy one commercial licence per company, per major version. Add-on packs are included. See LICENSE.md for the terms.

© JBay Solutions.