Updating Viewer parameter in React

Grasshopper ShapeDiver
1

I have a code snippet that renders a simple viewport in a simple React project

import { createSession } from "@shapediver/viewer.session";
import { createViewport } from "@shapediver/viewer.viewport";
import React, { useEffect, useRef } from "react";

export const ViewerFunctionalComponent: React.FC<{}> = () => {
  const canvasRef = useRef(null);
  let initialized = false;

  useEffect(() => {

    const init = async () => {
      if(!canvasRef.current) return;
      if(initialized) return;
      
      initialized = true;

      const canvasElement = canvasRef.current!;

      // create a viewport
      const v = await createViewport({
        canvas: canvasElement
      });

      // create a session
      const mySession = await createSession({
        ticket:
          "some-ticket",
        modelViewUrl: "some-model-view-url"
      });
      const parameters = mySession.parameters;
      
      console.log('------- logging parameters -------');
      Object.keys(parameters).forEach((key) => {
        console.log(parameters[key].name, parameters[key].type,);
      });
    };

    init();
  }, []);

  
  const divStyle = {
    width: "400px",
    height: "400px"
  };

  return (
    <div style={divStyle}>
      <canvas ref={canvasRef} />
    </div>
  );
};

Assuming I have all the hooks from AppBuilderShared repository, what’s the best way to update a parameter? For example, I have a parameter of type string that I want to modify by changing the <input /> tag within the web UI.

Viewer 3 React example
2

You would need to write React code that glues your input element with the viewer API. You can find lots of code examples for the viewer API here (not using React, but the principle is the same): ShapeDiver Viewer Examples
Please also refer to our help center: Viewer
For React-specific questions is best to consult documentation or LLMs.