Global

Members

CroquetContext

The react context to store the object returned from Session.join(). 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 croquetContext = useContext(CroquetContext);
const sessionId = croquetContext.id;

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>
   );
}