diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx index 93bc471..0446fd4 100644 --- a/src/hooks/useRive.tsx +++ b/src/hooks/useRive.tsx @@ -131,9 +131,10 @@ export default function useRive( let r: Rive | null; if (rive == null) { const { useOffscreenRenderer } = options; + const { onRiveReady, ...restRiveParams } = riveParams; r = new Rive({ useOffscreenRenderer, - ...riveParams, + ...restRiveParams, canvas: canvasElem, }); if (riveRef.current != null) { @@ -142,6 +143,11 @@ export default function useRive( riveRef.current = r; r.on(EventType.Load, () => { isLoaded = true; + + if (onRiveReady) { + onRiveReady(r!); + } + // Check if the component/canvas is mounted before setting state to avoid setState // on an unmounted component in some rare cases if (canvasElem) { diff --git a/src/types.ts b/src/types.ts index 0eebf66..68aed06 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,7 +6,9 @@ import { } from '@rive-app/canvas'; import { ComponentProps, RefCallback } from 'react'; -export type UseRiveParameters = Partial> | null; +export type UseRiveParameters = Partial> & { + onRiveReady?: (rive: Rive) => void; +} | null; export type UseRiveOptions = { useDevicePixelRatio: boolean;