ThreekitCanvas

Due to implementation details, any components that share state via context both inside and outside of the Canvas element needs to have a custom context bridge.

As a simple solution, ThreekitCanvas is a component that does just this. So by using ThreekitCanvas in place of Canvas from @react-three/fiber, you will not need to worry about this.

Example:

function MyAsset() {
  useAsset({ id, refkey: 'my-model' });
  return <Asset refkey="my-model" />;
}

function MyConfigurator() {
  const [attrs,setConfiguration] = useConfigurator('my-model');
  return <ul>{attrs.map((attr) => ...)}</ul>
}

function App() {
  return (
    <ThreekitSource token={authToken}>
      <ThreekitCanvas>
        <MyAsset />
      </ThreekitCanvas>
      <MyConfigurator />
    </ThreekitSource>
  );
}