diff --git a/src/hooks/useViewModel.ts b/src/hooks/useViewModel.ts index bb5ba71..02f4ff0 100644 --- a/src/hooks/useViewModel.ts +++ b/src/hooks/useViewModel.ts @@ -24,16 +24,19 @@ function areParamsEqual( /** * Hook for fetching a ViewModel from a Rive instance. * - * @param params - Parameters for retrieving a ViewModel - * @param params.rive - The Rive instance to retrieve the ViewModel from + * @param rive - The Rive instance to retrieve the ViewModel from + * @param params - Options for retrieving a ViewModel * @param params.name - When provided, specifies the name of the ViewModel to retrieve * @param params.useDefault - When true, uses the default ViewModel from the Rive instance * @returns The ViewModel or null if not found */ -export default function useViewModel(params: UseViewModelParameters): ViewModel | null { - const { rive, name, useDefault = false } = params; +export default function useViewModel( + rive: Rive | null, + params?: UseViewModelParameters +): ViewModel | null { + const { name, useDefault = false } = params ?? {}; const riveRef = useRef(null); - const paramsRef = useRef(params); + const paramsRef = useRef(params); const [viewModel, setViewModel] = useState(null); const shouldUpdate = useRef(true); diff --git a/src/hooks/useViewModelInstance.ts b/src/hooks/useViewModelInstance.ts index abe6dc6..172ac61 100644 --- a/src/hooks/useViewModelInstance.ts +++ b/src/hooks/useViewModelInstance.ts @@ -28,8 +28,8 @@ function areParamsEqual( /** * Hook for fetching a ViewModelInstance from a ViewModel. * - * @param params - Parameters for retrieving a ViewModelInstance - * @param params.viewModel - The ViewModel to get an instance from + * @param viewModel - The ViewModel to get an instance from + * @param params - Options for retrieving a ViewModelInstance * @param params.name - When provided, specifies the name of the instance to retrieve * @param params.useDefault - When true, uses the default instance from the ViewModel * @param params.useNew - When true, creates a new instance of the ViewModel @@ -37,13 +37,14 @@ function areParamsEqual( * @returns The ViewModelInstance or null if not found */ export default function useViewModelInstance( - params: UseViewModelInstanceParameters + viewModel: ViewModel | null, + params?: UseViewModelInstanceParameters ): ViewModelInstance | null { - const { viewModel, name, useDefault = false, useNew = false, rive } = params; + const { name, useDefault = false, useNew = false, rive } = params ?? {}; const [instance, setInstance] = useState(null); const viewModelRef = useRef(viewModel); - const paramsRef = useRef(params); + const paramsRef = useRef(params); const instanceRef = useRef(null); const shouldUpdate = useRef(true); diff --git a/src/hooks/useViewModelInstanceBoolean.ts b/src/hooks/useViewModelInstanceBoolean.ts index e469b44..5998fee 100644 --- a/src/hooks/useViewModelInstanceBoolean.ts +++ b/src/hooks/useViewModelInstanceBoolean.ts @@ -1,21 +1,19 @@ import { useCallback } from 'react'; -import { ViewModelInstanceBoolean } from '@rive-app/canvas'; -import { UseViewModelInstanceBooleanParameters, UseViewModelInstanceBooleanResult } from '../types'; +import { ViewModelInstanceBoolean, ViewModelInstance } from '@rive-app/canvas'; +import { UseViewModelInstanceBooleanResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; /** * Hook for interacting with boolean ViewModel instance properties. * - * @param params - Parameters for interacting with a boolean ViewModel instance property - * @param params.path - The path to the boolean property - * @param params.viewModelInstance - The ViewModelInstance containing the boolean property to operate on + * @param path - The path to the boolean property + * @param viewModelInstance - The ViewModelInstance containing the boolean property to operate on * @returns An object with the boolean value and a setter function */ export default function useViewModelInstanceBoolean( - params: UseViewModelInstanceBooleanParameters + path: string, + viewModelInstance?: ViewModelInstance | null ): UseViewModelInstanceBooleanResult { - const { path, viewModelInstance } = params; - const result = useViewModelInstanceProperty>( path, viewModelInstance, diff --git a/src/hooks/useViewModelInstanceColor.ts b/src/hooks/useViewModelInstanceColor.ts index da1b25e..ad5cecf 100644 --- a/src/hooks/useViewModelInstanceColor.ts +++ b/src/hooks/useViewModelInstanceColor.ts @@ -1,21 +1,19 @@ import { useCallback } from 'react'; -import { ViewModelInstanceColor } from '@rive-app/canvas'; -import { UseViewModelInstanceColorParameters, UseViewModelInstanceColorResult } from '../types'; +import { ViewModelInstanceColor, ViewModelInstance } from '@rive-app/canvas'; +import { UseViewModelInstanceColorResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; /** * Hook for interacting with color properties of a ViewModelInstance. * - * @param params - Parameters for interacting with color properties - * @param params.path - Path to the color property - * @param params.viewModelInstance - The ViewModelInstance containing the color property + * @param path - Path to the color property + * @param viewModelInstance - The ViewModelInstance containing the color property * @returns An object with the color value and setter functions for different color formats */ export default function useViewModelInstanceColor( - params: UseViewModelInstanceColorParameters + path: string, + viewModelInstance?: ViewModelInstance | null ): UseViewModelInstanceColorResult { - const { path, viewModelInstance } = params; - const result = useViewModelInstanceProperty>( path, viewModelInstance, diff --git a/src/hooks/useViewModelInstanceEnum.ts b/src/hooks/useViewModelInstanceEnum.ts index 196e210..0207ed6 100644 --- a/src/hooks/useViewModelInstanceEnum.ts +++ b/src/hooks/useViewModelInstanceEnum.ts @@ -1,6 +1,6 @@ import { useCallback } from 'react'; -import { ViewModelInstanceEnum } from '@rive-app/canvas'; -import { UseViewModelInstanceEnumParameters, UseViewModelInstanceEnumResult } from '../types'; +import { ViewModelInstance, ViewModelInstanceEnum } from '@rive-app/canvas'; +import { UseViewModelInstanceEnumResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; /** @@ -12,10 +12,9 @@ import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; * @returns An object with the enum value, available values, and a setter function */ export default function useViewModelInstanceEnum( - params: UseViewModelInstanceEnumParameters + path: string, + viewModelInstance?: ViewModelInstance | null ): UseViewModelInstanceEnumResult { - const { path, viewModelInstance } = params; - const result = useViewModelInstanceProperty< ViewModelInstanceEnum, string, diff --git a/src/hooks/useViewModelInstanceNumber.ts b/src/hooks/useViewModelInstanceNumber.ts index 70474c4..c7e26af 100644 --- a/src/hooks/useViewModelInstanceNumber.ts +++ b/src/hooks/useViewModelInstanceNumber.ts @@ -1,6 +1,6 @@ import { useCallback } from 'react'; -import { ViewModelInstanceNumber } from '@rive-app/canvas'; -import { UseViewModelInstanceNumberParameters, UseViewModelInstanceNumberResult } from '../types'; +import { ViewModelInstance, ViewModelInstanceNumber } from '@rive-app/canvas'; +import { UseViewModelInstanceNumberResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; /** @@ -12,10 +12,9 @@ import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; * @returns An object with the number value and a setter function */ export default function useViewModelInstanceNumber( - params: UseViewModelInstanceNumberParameters + path: string, + viewModelInstance?: ViewModelInstance | null ): UseViewModelInstanceNumberResult { - const { path, viewModelInstance } = params; - const result = useViewModelInstanceProperty>( path, viewModelInstance, diff --git a/src/hooks/useViewModelInstanceString.ts b/src/hooks/useViewModelInstanceString.ts index 21c207a..24fbf94 100644 --- a/src/hooks/useViewModelInstanceString.ts +++ b/src/hooks/useViewModelInstanceString.ts @@ -1,6 +1,6 @@ import { useCallback } from 'react'; -import { ViewModelInstanceString } from '@rive-app/canvas'; -import { UseViewModelInstanceStringParameters, UseViewModelInstanceStringResult } from '../types'; +import { ViewModelInstance, ViewModelInstanceString } from '@rive-app/canvas'; +import { UseViewModelInstanceStringResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; /** @@ -12,9 +12,9 @@ import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; * @returns An object with the string value and a setter function */ export default function useViewModelInstanceString( - params: UseViewModelInstanceStringParameters + path: string, + viewModelInstance?: ViewModelInstance | null ): UseViewModelInstanceStringResult { - const { path, viewModelInstance } = params; const result = useViewModelInstanceProperty>( path, diff --git a/src/hooks/useViewModelInstanceTrigger.ts b/src/hooks/useViewModelInstanceTrigger.ts index 44aaa3b..19c906d 100644 --- a/src/hooks/useViewModelInstanceTrigger.ts +++ b/src/hooks/useViewModelInstanceTrigger.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { ViewModelInstanceTrigger } from '@rive-app/canvas'; +import { ViewModelInstance, ViewModelInstanceTrigger } from '@rive-app/canvas'; import { UseViewModelInstanceTriggerParameters, UseViewModelInstanceTriggerResult } from '../types'; import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; @@ -13,9 +13,11 @@ import { useViewModelInstanceProperty } from './useViewModelInstanceProperty'; * @returns An object with a trigger function */ export default function useViewModelInstanceTrigger( - params: UseViewModelInstanceTriggerParameters + path: string, + viewModelInstance?: ViewModelInstance | null, + params?: UseViewModelInstanceTriggerParameters ): UseViewModelInstanceTriggerResult { - const { path, viewModelInstance, onTrigger } = params; + const { onTrigger } = params ?? {}; const { trigger } = useViewModelInstanceProperty( path, diff --git a/src/types.ts b/src/types.ts index 7a3fa44..0eebf66 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,10 +1,8 @@ import { Rive, - type ViewModel, RiveFile, RiveFileParameters, RiveParameters, - type ViewModelInstance, } from '@rive-app/canvas'; import { ComponentProps, RefCallback } from 'react'; @@ -61,93 +59,35 @@ export type RiveFileState = { }; /** - * Parameters for retrieving a ViewModel from a Rive instance. + * Parameters for useViewModel hook. * - * @property rive - The Rive instance to retrieve the ViewModel from. * @property name - When provided, specifies the name of the ViewModel to retrieve. * @property useDefault - When true, uses the default ViewModel from the Rive instance. */ export type UseViewModelParameters = - | { rive: Rive | null; name: string; useDefault?: never } - | { rive: Rive | null; useDefault?: boolean; name?: never }; + | { name: string; useDefault?: never } + | { useDefault?: boolean; name?: never }; /** - * Parameters for retrieving a ViewModelInstance. + * Parameters for useViewModelInstance hook. * - * @property viewModel - The ViewModel to get an instance from. * @property name - When provided, specifies the name of the instance to retrieve. * @property useDefault - When true, uses the default instance from the ViewModel. * @property useNew - When true, creates a new instance of the ViewModel. - * @property rive - When provided, automatically binds the instance to this Rive instance. + * @property rive - If provided, automatically binds the instance to this Rive instance. */ export type UseViewModelInstanceParameters = - | { viewModel: ViewModel | null; name: string; rive?: Rive | null; useDefault?: never; useNew?: never } - | { viewModel: ViewModel | null; useDefault?: boolean; rive?: Rive | null; name?: never; useNew?: never } - | { viewModel: ViewModel | null; useNew?: boolean; rive?: Rive | null; name?: never; useDefault?: never }; + | { name: string; useDefault?: never; useNew?: never; rive?: Rive | null } + | { useDefault?: boolean; name?: never; useNew?: never; rive?: Rive | null } + | { useNew?: boolean; name?: never; useDefault?: never; rive?: Rive | null }; -export type UseViewModelInstanceValueParameters = { - viewModelInstance?: ViewModelInstance | null; -}; -/** - * Parameters for interacting with number properties of a ViewModelInstance - * @property path - Path to the number property (e.g. "speed" or "group/speed") - * @property viewModelInstance - The ViewModelInstance containing the number property - */ -export type UseViewModelInstanceNumberParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; -}; - -/** - * Parameters for interacting with string properties of a ViewModelInstance - * @property path - Path to the string property (e.g. "text" or "nested/text") - * @property viewModelInstance - The ViewModelInstance containing the string property - */ -export type UseViewModelInstanceStringParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; -}; - -/** - * Parameters for interacting with boolean properties of a ViewModelInstance - * @property path - Path to the boolean property (e.g. "agreedToTerms" or "group/agreedToTerms") - * @property viewModelInstance - The ViewModelInstance containing the boolean property - */ -export type UseViewModelInstanceBooleanParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; -}; - -/** - * Parameters for interacting with color properties of a ViewModelInstance - * @property path - Path to the color property (e.g. "color" or "group/color") - * @property viewModelInstance - The ViewModelInstance containing the color property - */ -export type UseViewModelInstanceColorParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; -}; - -/** - * Parameters for interacting with enum properties of a ViewModelInstance - * @property path - Path to the enum property (e.g. "state" or "group/state") - * @property viewModelInstance - The ViewModelInstance containing the enum property - */ -export type UseViewModelInstanceEnumParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; -}; /** * Parameters for interacting with trigger properties of a ViewModelInstance - * @property path - Path to the trigger property (e.g. "onTap" or "group/onTap") - * @property viewModelInstance - The ViewModelInstance containing the trigger * @property onTrigger - Callback that runs when the trigger fires */ export type UseViewModelInstanceTriggerParameters = { - path: string; - viewModelInstance?: ViewModelInstance | null; onTrigger?: () => void; };