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