Global

Members

# CroquetContext

The react context to store the CroquetReactView instance. You can obtrain the value by calling useContext(CroquetContext). You can access useful values such as view, model, etc. from the value of this context.

Example:
const croquetView = useContext(CroquetContext);
const model = croquetView.model;

Methods

# useViewId() → {string}

A hook to obtain the viewId.

Returns:
Type
string
Example
const myViewId:string = useViewId();

# useSessionId() → {string}

A hook to obtain the sessionid.

Returns:
Type
string
Example
const sessionId:string = useSessionId();

# useModelRoot() → {Model}

A hook to obtain the root model object.

Returns:
  • The instance of a subclass of Model used as the root Model.
Type
Model
Example
const model = useModelRoot();

# useModelById() → {Model}

A hook to obtain a sub model object.

Returns:

the model object of a subclass of Model with id.

Type
Model
Example
const submodel = useModelRoot(rootModel.someData.id);

# usePublish()

A hook to create a function that publishes a view event.

Example
type GrabData = {viewId:string, id:string};
const publishRelease = usePublish<GrabData>((id) => 
  [model.id, 'release', {viewId: myViewId, id}]);

# useSubscribe()

A hook to set up a subscription to a Croquet message.

Example
function grabBall(data:GrabData):void  {}
useSubscribe<GrabData>(model.id, "grabbed", grabBall);

# useUpdateCallback()

Hook that sets up a callback for Croquet.View.update(). The callback function is called at each simulation cycle.

Example
useUpdateCallback((update:time:number) => void);

# useSyncedCallback()

Hook that sets up a callback for Croquet.View.synced(). The callback function is called when a Croquet synced event occurs.

Example
useSyncedCallback(synced:() => void);

# useDetachCallback()

Hook that sets up a callback for Croquet.View.detach(). The callback function is called when the root View is detached.

Example
useDetachCallback(detach:() => void);

# InCroquetSession()

Main wrapper component that starts and manages a croquet session, enabling child elements to use the hooks described above.

It takes the same parameters as Session.join except that it doesn't need a root View class, since croquet-react provides a suitable View class behind the scenes.

Example
function MyApp() {
   return (
     <InCroquetSession
       apiKey="1_123abc",
       appId="com.example.myapp"
       name="mySession"
       password="secret"
       model={MyRootModel}
          ...
     >
       // child elements that use hooks go here...
       <MyComponent/>
     </InCroquetSession>
   );
}

# createCroquetSession()

When Croquet is used in a component that is a part of a bigger application, it is sometimes better to establish the Croquet session instance outside, and then pass it in to the Croquet-powered part.

Returns:
  • the Croquet session object.
Example
const [croquetSession, setCroquetSession] = useState(null);
const calledOnce = useRef(false);
useEffect(() => {
  if (!calledOnce.current) {
    calledOnce.current = true;
    const sessionParams = {
      name: projectId,
      apiKey: import.meta.env.VITE_CROQUET_API_KEY,
      tps: 0.5,
      appId: import.meta.env.VITE_CROQUET_APP_ID,
      password: "abc",
      model: MyCroquetModel,
      eventRateLimit: import.meta.env.EVENT_RATE_LIMIT || 60,
    };
    createCroquetSession(sessionParams as any).then((session) => {
      console.log(`session created`);
      setCroquetSession(session);
    });
  }
}, [...]);
return (
  <CroquetRoot session={croquetSession}>
    <MyCroquetComponent/>
  </CroquetRoot>
);

# CroquetRoot()

CroquetRoot component implements the default implementation of the logic described for createCroquetSession function. props.sessionParams is the session parameter object that is passed to Session.join via createCroquetSesion().

Returns:
  • A React component