Migrating from 1.x.x to 3.x.x
Migrating to v3.x.x
This article is out of date! Find the new version here.
For the most part, if you're using v1.x.x of rive-react
, you should be able to upgrade to the new dependencies in v3.x.x without many changes.
Note: Migrating from v2.x.x to 3.x.x can be done safely without any changes on your end.
Dependency Change
Previous to v2.x.x, you could use Rive in React via the 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:
(Recommended)
@rive-app/react-canvas
@rive-app/react-webgl
The 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:
After:
There are no changes regarding the way you import from the React runtime between rive-react
and @rive-app/react-canvas
Prop Spreading
The React runtime provides a 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:
Would render the (simplified) DOM such as:
After:
Now yields the following (simplified) DOM:
Last updated