@playcanvas/react
Version:
A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.
77 lines (76 loc) • 2.26 kB
TypeScript
/**
* Base event callback map for PlayCanvas application events.
* This can be extended to include custom events.
*/
export type BaseEventCallbackMap = {
/**
* @param dt - The delta time since the last frame
* @returns void
*/
update: (dt: number) => void;
/**
* @returns void
*/
prerender: () => void;
/**
* @returns void
*/
postrender: () => void;
};
/**
* Generic hook for subscribing to PlayCanvas application events.
* Supports both built-in events and custom events with proper TypeScript typing.
*
* @param event - The event name to subscribe to
* @param callback - The callback function to execute when the event fires
*
* @example
* ```tsx
* // Built-in events with type safety
* useAppEvent('update', (dt) => console.log('Frame time:', dt));
* useAppEvent('prerender', () => console.log('Pre-render'));
* useAppEvent('postrender', () => console.log('Post-render'));
* ```
*
* @example
* ```tsx
* // Custom events with custom event map - no inheritance needed
* interface MyEventMap {
* levelComplete: (level: number, score: number) => void;
* playerDeath: (position: [number, number, number]) => void;
* }
*
* useAppEvent<MyEventMap>('levelComplete', (level, score) => {
* console.log(`Level ${level} completed with score ${score}`);
* });
*
* useAppEvent<MyEventMap>('playerDeath', (position) => {
* console.log('Player died at', position);
* });
* ```
*
* @example
* ```tsx
* function MyComponent() {
* // Frame update with delta time
* useAppEvent('update', (dt) => {
* console.log('Frame delta time:', dt);
* });
*
* // App lifecycle events
* useAppEvent('prerender', () => {
* console.log('Pre-rendering');
* });
*
* return null;
* }
* ```
*/
export declare function useAppEvent<TEventMap = BaseEventCallbackMap, TEventName extends keyof TEventMap = keyof TEventMap>(event: TEventName, callback: TEventMap[TEventName]): void;
/**
* useFrame hook — registers a callback on every frame update.
* The callback receives the delta time (dt) since the last frame.
*
* @deprecated Use useAppEvent('update', callback) instead
*/
export declare const useFrame: (callback: (dt: number) => void) => void;