UNPKG

@multisynq/react

Version:

React bindings for Multisynq

51 lines (49 loc) 2.02 kB
import { MultisynqSessionParameters } from '@multisynq/client'; import { MultisynqReactView } from './MultisynqReactView'; import { ReactModel } from './ReactModel'; export interface MultisynqReactSessionParameters<M extends ReactModel, T = unknown> extends Omit<MultisynqSessionParameters<M, MultisynqReactView<M>, T>, 'view'> { } /** When Multisynq is used in a component that is a part of a bigger application, * it is sometimes better to establish the Multisynq session instance outside, * and then pass it in to the Multisynq-powered part. * ``` * const [multisynqSession, setMultisynqSession] = useState(null) * const [multisynqView, setMultisynqView] = useState(null) * const calledOnce = useRef(false) * useEffect(() => { * if (!calledOnce.current) { * calledOnce.current = true * const sessionParams = { * name: projectId, * apiKey: import.meta.env.VITE_MULTISYNQ_API_KEY, * tps: 0.5, * appId: import.meta.env.VITE_MULTISYNQ_APP_ID, * password: 'abc', * model: MyMultisynqModel, * eventRateLimit: import.meta.env.EVENT_RATE_LIMIT || 60, * } * createMultisynqSession(sessionParams as any).then((session) => { * console.log(`session created`) * setMultisynqSession(session) * setMultisynqView(session.view) * setSyncedCallback((flag) => { * console.log(`synced`, flag) * if (flag) { * setMultisynqView((old) => session.view) * } * session.view.detachCallback = (e) => { * console.log(`detached`) * setMultisynqView(null) * } * }) * }) * } * }, []) * return ( * <MultisynqRoot multisynqView={multisynqView}> * <MyMultisynqComponent/> * </MultisynqRoot> * ) ``` */ export declare function createMultisynqSession<M extends ReactModel>(params: MultisynqReactSessionParameters<M>): Promise<import("@multisynq/client").MultisynqSession<MultisynqReactView<M>>>;