Contributing to Rive React

We love contributions! If you want to run the project locally to test out changes, run the examples, or just see how things work under the hood, this guide will help you get started.

Local Development Setup

This runtime consumes specific versions of the Rive JS/WASM runtime. The build process ensures that the correct dependencies are used for each renderer package.

Installation

  1. Clone the project from GitHub: 

    git clone https://github.com/rive-app/rive-react.git
cd rive-react

  2. Install the necessary dependencies: 

    npm install

Development Server

To build the src/ files and watch for changes, run the development server. This will automatically rebuild the project when you save a file.

npm run dev

Running Examples with Storybook

We use Storybook to develop and showcase examples. The stories are located in the /examples directory.

  1. Start the Storybook server: 

    npm run storybook

  2. In a separate terminal, run the development server to see your changes to the core library reflected in Storybook: 

    npm run dev

Running Tests

We have a suite of unit tests in the /test directory. When adding new features or fixing bugs, please add or update tests accordingly.

To run the entire test suite:

npm test

Making Changes and Submitting a Pull Request

  1. Create a new feature branch from main.
  2. Make your changes, including adding tests and updating documentation as needed.

  3. Follow our commit message conventions. This helps us generate a clear changelog.

    • For bug fixes: Fix: Fixing a return type from useRive
    • For documentation: Docs: Adding a new link for another example page
    • For features/breaking changes: Major: Restructuring the useRive API with new parameters

  4. Push your branch to GitHub and open a pull request against the main branch.

Bumping the JS/WASM Runtime

Many features and fixes come from the underlying @rive-app/canvas and @rive-app/webgl runtimes. To update to a new version:

  1. Change the version number for the relevant @rive-app/* packages in the root package.json.
  2. Run npm install to get the new versions.
  3. Test the changes locally using Storybook and the test suite to ensure no regressions.
  4. Submit a pull request with your changes.

When a pull request is merged, a new version of the packages will be automatically deployed based on the commit messages.