src- A string of the URL where the
.rivfile is hosted (like in the example below), or the path to a local
canvas- The canvas element on which you want the animation to render
autoplay- Boolean for whether you want the default animation to play
@rive-app/react-canvas- Wraps the
@rive-app/canvasdependency. Unless you specifically need a
WebGLbacking renderer, we recommend you use this dependency when using Rive in your apps for quick and fast usage.
@rive-app/react-webgl- Wraps the
@rive-app/webgldependency. In the future, we may have advanced rendering features that are only supported by using
WebGL. We are currently working on improving the performance with this backing renderer.
rive-reactdependency and is still published today. Despite being actively published, It contains a larger bundle, as it has dependencies for both
@rive-app/webgl. Starting in v2.0.0, we recommend you switch to one of the above dependencies instead.
src: File path or URL to the .riv file to display.
artboard: (optional) Name to display.
animations: (optional) Name or list of names of animations to play.
layout: (optional) Layout object to define how animations are displayed on the canvas.
divelement can also be passed to the
Rivecomponent and used in the same manner.
useRivehook is provided. The hook will return a component and a
Riveobject which gives you control of the current rive file.
riveParams: Set of parameters that are passed to the Rive.js
undefinedcan be passed to conditionally display the .riv file.
opts: Rive React-specific options.
RiveComponent: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a
rive: A Rive.js
Riveobject. This will return as null until the .riv file has fully loaded.
canvas: HTMLCanvasElement object, on which the .riv file is rendering.
setCanvasRef: A callback ref that can be passed to your own canvas element, if you wish to have control over the rendering of the Canvas element.
setContainerRef: A callback ref that can be passed to a container element that wraps the canvas element, if you wish to have control over the rendering of the container element.
RiveComponentand don't need to worry about
src?: (optional) File path or URL to the .riv file to use. One of
buffermust be provided.
buffer?: (optional) ArrayBuffer containing the raw bytes from a .riv file. One of
buffermust be provided.
artboard?: (optional) Name of the artboard to use.
animations?: (optional) Name or list of names of animations to play.
stateMachines?: (optional) Name or list of names of state machines to load.
autoplay?: (optional) If
true, the animation will automatically start playing when loaded. Defaults to false.
onLoad?: (optional) Callback that gets fired when the .rive file loads.
onLoadError?: (optional) Callback that gets fired when an error occurs loading the .riv file.
onPlay?: (optional) Callback that gets fired when the animation starts playing.
onPause?: (optional) Callback that gets fired when the animation pauses.
onStop?: (optional) Callback that gets fired when the animation stops playing.
onLoop?: (optional) Callback that gets fired when the animation completes a loop.
onStateChange?: (optional) Callback that gets fired when a state change occurs.
useDevicePixelRatio: (optional) If
true, the hook will scale the resolution of the animation based on the devicePixelRatio. Defaults to
true. NOTE: Requires the
setContainerRefref callback to be passed to an element wrapping a canvas element. If you use the
RiveComponent, then this will happen automatically.
fitCanvasToArtboardHeight: (optional) If
true, then the canvas will resize based on the height of the artboard. Defaults to
RiveViewModeland set its view as the
RiveViewwhen it is loaded.
RiveViewand use the
RiveFileAPI to load in this example
.rivasset. Then simply set the
RiveViewas the controller's view when loaded:
build.gradlefile in your project:
off_road_car_blog.riv) and placed it in your raw resources folder.