+ );
};
\ No newline at end of file
diff --git a/src/hooks/useViewModelInstanceList.ts b/src/hooks/useViewModelInstanceList.ts
index 21da86b..2a9d838 100644
--- a/src/hooks/useViewModelInstanceList.ts
+++ b/src/hooks/useViewModelInstanceList.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
import { ViewModelInstance, ViewModelInstanceList } from '@rive-app/canvas';
import { UseViewModelInstanceListResult } from '../types';
import { useViewModelInstanceProperty } from './useViewModelInstanceProperty';
@@ -15,13 +15,22 @@ export default function useViewModelInstanceList(
viewModelInstance?: ViewModelInstance | null
): UseViewModelInstanceListResult {
+ // We track revision to trigger re-renders on list manipulation (e.g. addInstance, removeInstance, etc).
+ // This is mostly important for things like the swap function which wouldn't trigger a re-render otherwise.
+ // It also accounts for changes that happen within the Rive file itself rather than through the hook.
+ const [_revision, setRevision] = useState(0);
+
const result = useViewModelInstanceProperty>(
path,
viewModelInstance,
{
getProperty: useCallback((vm, p) => vm.list(p), []),
getValue: useCallback((prop) => prop.length, []),
- defaultValue: 0,
+ defaultValue: null,
+ onPropertyEvent: () => {
+ // This fires when the list changes in Rive
+ setRevision(prev => prev + 1);
+ },
buildPropertyOperations: useCallback((safePropertyAccess) => ({
addInstance: (instance: ViewModelInstance) => {
safePropertyAccess(prop => prop.addInstance(instance));
diff --git a/src/index.ts b/src/index.ts
index 19f1ccb..a9951e5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ import useViewModelInstanceColor from './hooks/useViewModelInstanceColor';
import useViewModelInstanceEnum from './hooks/useViewModelInstanceEnum';
import useViewModelInstanceTrigger from './hooks/useViewModelInstanceTrigger';
import useViewModelInstanceImage from './hooks/useViewModelInstanceImage';
+import useViewModelInstanceList from './hooks/useViewModelInstanceList';
import useResizeCanvas from './hooks/useResizeCanvas';
import useRiveFile from './hooks/useRiveFile';
@@ -28,6 +29,7 @@ export {
useViewModelInstanceEnum,
useViewModelInstanceTrigger,
useViewModelInstanceImage,
+ useViewModelInstanceList,
RiveProps,
};
export {