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.
- 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>
);
}
# 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.
- the Croquet session object.
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().
- A React component