diff --git a/src/hooks/useViewModel.ts b/src/hooks/useViewModel.ts index 5bfeb97..9447205 100644 --- a/src/hooks/useViewModel.ts +++ b/src/hooks/useViewModel.ts @@ -2,10 +2,7 @@ import { useState, useEffect, useRef } from 'react'; import { EventType, Rive, ViewModel } from '@rive-app/canvas'; import { UseViewModelParameters } from '../types'; -const defaultParams: UseViewModelParameters = { - useDefault: false, - name: '', -}; +const defaultParams: UseViewModelParameters = { useDefault: true }; const equal = ( params: UseViewModelParameters | null, @@ -14,10 +11,16 @@ const equal = ( if (!params || !to) { return false; } - if (params.useDefault !== to.useDefault || params.name !== to.name) { - return false; + + if ('name' in params) { + return 'name' in to && params.name === to.name; } - return true; + + if ('useDefault' in params) { + return 'useDefault' in to && params.useDefault === to.useDefault; + } + + return false; }; /** @@ -25,7 +28,15 @@ const equal = ( * * @param rive - Rive instance * @param userParameters - Parameters to load view model - * @returns + * @returns The ViewModel instance or null if not available + * + * @example + * // Use the default view model + * const viewModel = useViewModel(rive, { useDefault: true }); + * + * @example + * // Use a named view model + * const viewModel = useViewModel(rive, { name: 'myViewModel' }); */ export default function useViewModel( rive: Rive | null, @@ -35,21 +46,19 @@ export default function useViewModel( const currentParams = useRef(null); useEffect(() => { - const parameters = { - ...defaultParams, - ...userParameters, - }; + const parameters = userParameters || defaultParams; function getViewModel(): ViewModel | null { if (rive) { - if (parameters?.useDefault) { - return rive!.defaultViewModel(); - } else if (parameters?.name) { - return rive.viewModelByName(parameters?.name); + if ('name' in parameters && parameters.name) { + return rive.viewModelByName(parameters.name); + } else if ('useDefault' in parameters && parameters.useDefault) { + return rive.defaultViewModel(); } } return null; } + function setViewModelValue() { if (!rive) { setViewModel(null); diff --git a/src/hooks/useViewModelInstance.ts b/src/hooks/useViewModelInstance.ts index e34c316..053754c 100644 --- a/src/hooks/useViewModelInstance.ts +++ b/src/hooks/useViewModelInstance.ts @@ -7,11 +7,7 @@ import { } from '@rive-app/canvas'; import { UseViewModelInstanceParameters } from '../types'; -const defaultParams: UseViewModelInstanceParameters = { - useDefault: false, - useNew: true, - name: '', -}; +const defaultParams: UseViewModelInstanceParameters = { useNew: true }; const equal = ( params: UseViewModelInstanceParameters | null, @@ -20,55 +16,73 @@ const equal = ( if (!params || !to) { return false; } - if ( - params.useDefault !== to.useDefault || - params.useNew !== to.useNew || - params.name !== to.name - ) { - return false; + + if ('name' in params) { + return 'name' in to && params.name === to.name; } - return true; + + if ('useDefault' in params) { + return 'useDefault' in to && params.useDefault === to.useDefault; + } + + if ('useNew' in params) { + return 'useNew' in to && params.useNew === to.useNew; + } + + return false; }; /** * Custom hook for fetching a view model instance. * * @param rive - Rive instance + * @param viewModel - ViewModel to get an instance from * @param userParameters - Parameters to load view model instance - * @returns + * @returns The ViewModelInstance or null if not available + * + * @example + * // Create a new instance of the view model + * const viewModelInstance = useViewModelInstance(rive, viewModel, { useNew: true }); + * + * @example + * // Use the default instance of the view model + * const viewModelInstance = useViewModelInstance(rive, viewModel, { useDefault: true }); + * + * @example + * // Use a named instance of the view model + * const viewModelInstance = useViewModelInstance(rive, viewModel, { name: 'myInstance' }); */ -export default function useViewModel( +export default function useViewModelInstance( rive: Rive | null, viewModel: ViewModel | null, userParameters?: UseViewModelInstanceParameters -) : ViewModelInstance | null { +): ViewModelInstance | null { const [viewModelInstance, setViewModelInstance] = useState(null); const currentParams = useRef(null); useEffect(() => { - const parameters = { - ...defaultParams, - ...userParameters, - }; + const parameters = userParameters || defaultParams; function setInstance(instance: ViewModelInstance | null) { setViewModelInstance(instance); rive!.bindViewModelInstance(instance); currentParams.current = parameters; } + function getViewModelInstance(): ViewModelInstance | null { if (viewModel) { - if (parameters.useDefault) { - return viewModel?.defaultInstance(); - } else if (parameters.name) { - return viewModel?.instanceByName(parameters.name); - } else if (parameters.useNew) { - return viewModel?.instance(); + if ('name' in parameters && parameters.name) { + return viewModel.instanceByName(parameters.name); + } else if ('useDefault' in parameters && parameters.useDefault) { + return viewModel.defaultInstance(); + } else if ('useNew' in parameters && parameters.useNew) { + return viewModel.instance(); } } return null; } + function setViewModelValue() { if (!rive || !viewModel) { setViewModelInstance(null); diff --git a/src/hooks/useViewModelProperties.ts b/src/hooks/useViewModelProperties.ts index 2610d46..71a59e1 100644 --- a/src/hooks/useViewModelProperties.ts +++ b/src/hooks/useViewModelProperties.ts @@ -79,7 +79,7 @@ export default function useViewModelProperties( path: string ): ViewModelInstance | null { const viewModelInstance: ViewModelInstance | null = getViewModelInstance(); - if(path === '') { + if (path === '') { return viewModelInstance; } return viewModelInstance?.viewModel(path) || null; diff --git a/src/index.ts b/src/index.ts index a33a656..13f2c1e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,15 @@ import Rive, { RiveProps } from './components/Rive'; import useRive from './hooks/useRive'; import useStateMachineInput from './hooks/useStateMachineInput'; +import useViewModel from './hooks/useViewModel'; +import useViewModelInstance from './hooks/useViewModelInstance'; +import useViewModelInstanceNumber from './hooks/useViewModelInstanceNumber'; +import useViewModelInstanceString from './hooks/useViewModelInstanceString'; +import useViewModelInstanceBoolean from './hooks/useViewModelInstanceBoolean'; +import useViewModelInstanceColor from './hooks/useViewModelInstanceColor'; +import useViewModelInstanceEnum from './hooks/useViewModelInstanceEnum'; +import useViewModelInstanceTrigger from './hooks/useViewModelInstanceTrigger'; +import useViewModelProperties from './hooks/useViewModelProperties'; import useResizeCanvas from './hooks/useResizeCanvas'; import useRiveFile from './hooks/useRiveFile'; @@ -10,6 +19,15 @@ export { useStateMachineInput, useResizeCanvas, useRiveFile, + useViewModel, + useViewModelInstance, + useViewModelInstanceNumber, + useViewModelInstanceString, + useViewModelInstanceBoolean, + useViewModelInstanceColor, + useViewModelInstanceEnum, + useViewModelInstanceTrigger, + useViewModelProperties, RiveProps, }; export { @@ -18,4 +36,4 @@ export { UseRiveFileParameters, UseRiveOptions, } from './types'; -export * from '@rive-app/canvas'; +export * from '@rive-app/canvas'; \ No newline at end of file