Types API Reference

This page details the core TypeScript types exported from rive-react for use in your applications.

RiveState

The object returned by the useRive hook.

export type RiveState = {
  canvas: HTMLCanvasElement | null;
  container: HTMLElement | null;
  setCanvasRef: RefCallback<HTMLCanvasElement>;
  setContainerRef: RefCallback<HTMLElement>;
  rive: Rive | null;
  RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
};

UseRiveParameters

The configuration object passed to the useRive hook or <Rive /> component. It mirrors the constructor of the core Rive class.

export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> & {
  onRiveReady?: (rive: Rive) => void;
} | null;

UseRiveOptions

Hook-specific options for useRive.

export type UseRiveOptions = {
  useDevicePixelRatio: boolean;
  customDevicePixelRatio: number;
  fitCanvasToArtboardHeight: boolean;
  useOffscreenRenderer: boolean;
  shouldResizeCanvasToContainer: boolean;
  shouldUseIntersectionObserver?: boolean;
};

RiveFileState

The object returned by the useRiveFile hook.

export type RiveFileState = {
  riveFile: RiveFile | null;
  status: 'idle' | 'loading' | 'failed' | 'success';
};

Data Binding Types

These types define the return values for the Data Binding hooks.

• UseViewModelInstanceStringResult: { value: string | null, setValue: (v: string) => void }
• UseViewModelInstanceNumberResult: { value: number | null, setValue: (v: number) => void }
• UseViewModelInstanceBooleanResult: { value: boolean | null, setValue: (v: boolean) => void }
• UseViewModelInstanceColorResult: { value: number | null, setValue, setRgb, ... }
• UseViewModelInstanceEnumResult: { value: string | null, values: string[], setValue }
• UseViewModelInstanceTriggerResult: { trigger: () => void }
• UseViewModelInstanceImageResult: { setValue: (img: RiveRenderImage | null) => void }
• UseViewModelInstanceListResult: { length, addInstance, getInstanceAt, ... }
• UseViewModelInstanceArtboardResult: { setValue: (artboard: RiveArtboard | null) => void }