Skip to content
Dopple Documentation

Usage with Frameworks

Dopple is designed to be framework-agnostic, and is compatible with sites built with any front-end JavaScript framework, such as React, Vue, or Svelte.

The examples below showcase the basics of creating a new component with Dopple, binding UI elements to handle product configuration dynamically, and component cleanup when the component is unmounted, but the rest of Dopple’s features — such as hotspots, snapshots, and augmented reality — are fully available as well using the same patterns.

Initialization

Section titled “Initialization”

Depending on your use case, you may either hardcode the initialization options or pass them as props to your component. The examples below will show them passed as props.

It is recommended to initialize the DoppleXR instance when your component first mounts.

DoppleComponent.tsx
import React, { useEffect, useRef, useState } from "react";
import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";


const DoppleComponent: React.FC<DoppleComponentProps> = () => {
  const doppleContainerRef = useRef<HTMLDivElement>(null);
  const [dopple, setDopple] = useState<DoppleXR | null>(null);


  useEffect(() => {
    if (doppleContainerRef.current) {
      const doppleInstance = new DoppleXR({
        container: doppleContainerRef.current,
        owner: "my-org",
        workspace: "my-workspace",
        projectName: "My Project",
        productVersion: "1",
        selection: {}
      });
      setDopple(doppleInstance);
    }
  }, []);


  return <div ref={doppleContainerRef}></div>;
};


export default DoppleComponent;

Product Configuration

Section titled “Product Configuration”

Use the updateSelection() method to update the 3D product’s configuration when a user selects a new option in your UI. See Product Configuration for more info.

In the examples below, “product-color” is a property that has been set in the product’s glTF file using the glTF Editor.

const updateColor = (event) => {
  dopple?.updateSelection({
    "product-color": event.target.value,
  });
};
<select onChange={updateColor}>
  {["red", "yellow", "green", "blue"].map((color) => (
    <option key={color} value={color}>
      {color}
    </option>
  ))}
</select>

Unmounting

Section titled “Unmounting”

Use the [Symbol.dispose]() method to destroy the 3D product’s instance when the component is unmounted.

useEffect(() => {
  /* ... */
  return () => {
    dopple[Symbol.dispose]();
    dopple = null;
  };
}, []);

Most frameworks will handle some resource cleanup automatically as they remove components from the DOM, but it is important to fully dispose of the Dopple instance to avoid memory leaks and clear up all loaded resources for the browser.

Full Code Examples

Section titled “Full Code Examples”
DoppleComponent.tsx
import React, { useEffect, useRef, useState } from "react";


// 1. Import Dopple
import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";


// 2. Define props to be used when creating the 3D product's instance
interface DoppleComponentProps {
  defaultSelection: Record<string, string>;
  owner: string;
  projectName: string;
  version: string;
  workspace: number;
}


const DoppleComponent: React.FC<DoppleComponentProps> = ({
  defaultSelection,
  owner,
  projectName,
  version,
  workspace
}) => {


  // 3. Define a `<div>` element to contain the 3D product's canvas
  const doppleContainerRef = useRef<HTMLDivElement>(null);
  const [dopple, setDopple] = useState<DoppleXR | null>(null);


  // 4. Initialize the 3D product once the component has been mounted
  useEffect(() => {
    if (doppleContainerRef.current) {
      const doppleInstance = new DoppleXR({
        container: doppleContainerRef.current,
        owner,
        workspace,
        projectName,
        productVersion: version,
        selection: defaultSelection,
      });


      setDopple(doppleInstance);


      // 5. Cleanup the 3D product's instance when the component is unmounted
      return () => {
        doppleInstance[Symbol.dispose]();
        setDopple(null);
      };
    }
  }, [owner, projectName, version, workspace, defaultSelection]);


  // 6. Update the "product-color" property when the user selects a new color
  const updateColor = (event: React.ChangeEvent<HTMLSelectElement>) => {
    dopple?.updateSelection({
      "product-color": event.target.value,
    });
  };


  return (
    <div>
      <div ref={doppleContainerRef}></div>
      <label>
        <span>Product Color</span>
        <select onChange={updateColor}>
          {["red", "yellow", "green", "blue"].map((color) => (
            <option key={color} value={color}>
              {color}
            </option>
          ))}
        </select>
      </label>
    </div>
  );
};


export default DoppleComponent;