Getting Started with @the-boundary/sdk

Step 1: Installation

Choose your preferred package manager:

npm config set @the-boundary:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken=YOUR_REGISTRY_TOKEN
 
npm install @the-boundary/sdk @react-spring/three@9.7.3 @react-spring/web@9.7.3 @react-three/drei@9.97.5 @react-three/fiber@8.15.16 react@18.2.0 three@0.159.0 zustand@4.5.5

yarn config set @the-boundary:registry https://npm.pkg.github.com
yarn config set "//npm.pkg.github.com/:_authToken" "YOUR_REGISTRY_TOKEN"
 
yarn add @the-boundary/sdk @react-spring/three@9.7.3 @react-spring/web@9.7.3 @react-three/drei@9.97.5 @react-three/fiber@8.15.16 react@18.2.0 three@0.159.0 zustand@4.5.5

pnpm config set @the-boundary:registry https://npm.pkg.github.com
pnpm config set //npm.pkg.github.com/:_authToken YOUR_REGISTRY_TOKEN
 
pnpm add @the-boundary/sdk @react-spring/three@9.7.3 @react-spring/web@9.7.3 @react-three/drei@9.97.5 @react-three/fiber@8.15.16 react@18.2.0 three@0.159.0 zustand@^4.5.5

Initialization

The Space component can be initialized in three different ways:

Tour ID: The simplest method - provide a tour ID and the SDK will fetch all necessary data
Custom Path: Use a custom API endpoint to fetch tour data
Tour Data: Pass tour data directly to the component for full control over the tour content

// Initialize with a tour ID
import { Space } from "@the-boundary/sdk"
 
function MyTour() {
  return (
    <Space 
      tourId="cm3ycbghq0000ofkmlo1v9e0u"
      style={{ width: "100%", height: "400px" }}
    />
  )
}

// Initialize with a custom path
import { Space } from "@the-boundary/sdk"
 
function MyTour() {
  return (
    <Space 
      path="/custom/tour/path"
      style={{ width: "100%", height: "400px" }}
    />
  )
}

// Initialize with tour data
import { Space } from "@the-boundary/sdk"
 
function MyTour() {
  const tourData = {
    id: "custom-tour",
    name: "My Custom Tour",
    cameras: [
      // Camera data...
    ],
    annotations: [
      // Annotation data...
    ]
    // Other tour properties...
  }
 
  return (
    <Space 
      tour={tourData}
      style={{ width: "100%", height: "400px" }}
    />
  )
}

Overview Floorplan