Migrating to v3.x.x
rive-react
, you should be able to upgrade to the new dependencies in v3.x.x without many changes.
rive-react
package. This package was a wrapper around the @rive-app/webgl
dependency. In version 2.x.x+, we enable the React runtime to wrap around both the @rive-app/webgl
and @rive-app/canvas
dependencies through 2 main new React packages:
@rive-app/react-canvas
@rive-app/react-webgl
rive-react
package will still be published to regularly along with the above packages, but it has both of the web runtime dependencies set as dependencies
and may result in a larger bundle. Because of this, we recommend switching from rive-react
to @rive-app/react-canvas
or the WebGL variant if you need to use a WebGL backing context.
Before:
rive-react
and @rive-app/react-canvas
RiveComponent
whether you use the default export or the useRive
hook provided. This component should be passed into the JSX to render the canvas out. The DOM encompasses a wrapping div around the canvas that helps to handle the styling and sizing of the canvas. Most props spread on the RiveComponent
would be spread onto that wrapping <div>
element. Starting in v2.x.x, certain props will be spread onto the wrapping <div>
that concern styling (i.e className
and style
), but any other props will now be spread onto the <canvas>
element, so that you can set role
, aria-*
attributes, etc.
Before: