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.
- Type
- string
const myViewId:string = useViewId();
# useSessionId() → {string}
A hook to obtain the sessionid.
- Type
- string
const sessionId:string = useSessionId();
# useModelRoot() → {Model}
A hook to obtain the root model object.
- The instance of a subclass of Model used as the root Model.
- Type
- Model
const model = useModelRoot();
# useModelById() → {Model}
A hook to obtain a sub model object.
the model object of a subclass of Model with id.
- Type
- Model
const submodel = useModelRoot(rootModel.someData.id);
# usePublish()
A hook to create a function that publishes a view event.
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.
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.
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.
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.
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.
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>
);
}