javascript/rive-react
1
0
Fork 0
mirror of https://github.com/rive-app/rive-react.git synced 2026-03-13 08:22:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: change useViewModel property hook parameters to match conventions

Browse Source
This commit is contained in:
Adam
2025-04-29 17:07:17 -07:00
parent efd6c4ce82
commit 4e45f74a47
9 changed files with 51 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/hooks/useViewModel.ts
View File

@@ -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<Rive | null>(null);
const paramsRef = useRef<UseViewModelParameters>(params);
const paramsRef = useRef<UseViewModelParameters | undefined>(params);
const [viewModel, setViewModel] = useState<ViewModel | null>(null);
const shouldUpdate = useRef(true);

11
src/hooks/useViewModelInstance.ts
View File

@@ -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<ViewModelInstance | null>(null);
const viewModelRef = useRef<ViewModel | null>(viewModel);
const paramsRef = useRef<UseViewModelInstanceParameters>(params);
const paramsRef = useRef<UseViewModelInstanceParameters | undefined>(params);
const instanceRef = useRef<ViewModelInstance | null>(null);
const shouldUpdate = useRef(true);

14
src/hooks/useViewModelInstanceBoolean.ts
View File

@@ -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<ViewModelInstanceBoolean, boolean, Omit<UseViewModelInstanceBooleanResult, 'value'>>(
path,
viewModelInstance,

14
src/hooks/useViewModelInstanceColor.ts
View File

@@ -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<ViewModelInstanceColor, number, Omit<UseViewModelInstanceColorResult, 'value'>>(
path,
viewModelInstance,

9
src/hooks/useViewModelInstanceEnum.ts
View File

@@ -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,

9
src/hooks/useViewModelInstanceNumber.ts
View File

@@ -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<ViewModelInstanceNumber, number, Omit<UseViewModelInstanceNumberResult, 'value'>>(
path,
viewModelInstance,

8
src/hooks/useViewModelInstanceString.ts
View File

@@ -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<ViewModelInstanceString, string, Omit<UseViewModelInstanceStringResult, 'value'>>(
path,

8
src/hooks/useViewModelInstanceTrigger.ts
View File

@@ -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<ViewModelInstanceTrigger, undefined, UseViewModelInstanceTriggerResult>(
path,

76
src/types.ts
View File

@@ -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;
};