@croquet/react/dist/CroquetReactView.js

React bindings for Croquet

import { View } from '@croquet/croquet';
let storedSyncedCallback = null;
// our top level view that gets the root model
// and from which we create our one-time-use views per component
export class CroquetReactView extends View {
    constructor(model) {
        super(model);
        this.model = model;
        this.updateCallback = null;
        this.syncedCallback = storedSyncedCallback;
        this.detachCallback = null;
        this.subscribe(this.viewId, 'synced', this.synced);
    }
    update(time) {
        if (this.updateCallback !== null) {
            this.updateCallback(time);
        }
    }
    synced(flag) {
        // console.log('synced', flag)
        if (this.syncedCallback) {
            this.syncedCallback(flag);
        }
    }
    detach() {
        if (this.detachCallback) {
            this.detachCallback();
        }
        super.detach();
    }
}
/** A function to set up the handler for the synced event.
 * It is supposed to be called from the React component that
 * calls createReactSession() in the following manner from where the
 *
 *```
 *setSyncedCallback((flag) => {
 *    console.log(`synced`, flag)
 *    if (flag) {
 *        setCroquetView((old) => session.view)
 *    }
 *    session.view.detachCallback = () => {
 *        console.log(`detached`)
 *        setCroquetView(null)
 *    }
 *})
 *```
 */
export function setSyncedCallback(func) {
    storedSyncedCallback = func;
}