Skip to content

feat: add onRiveReady callback to useRive hook#367

Merged
damzobridge merged 2 commits into
mainfrom
feature/on-load-callback
Jun 23, 2025
Merged

feat: add onRiveReady callback to useRive hook#367
damzobridge merged 2 commits into
mainfrom
feature/on-load-callback

Conversation

@damzobridge

@damzobridge damzobridge commented Jun 19, 2025

Copy link
Copy Markdown
Contributor

This PR adds an onRiveReady callback to the useRive hook. There's already an onLoad callback in the hook's UseRiveParameters, however, it doesn't include the rive object, so users can't set inputs or do anything within that callback.

So this adds a version of the callback that includes the Rive object.

const { rive, RiveComponent } = useRive({
    src: 'rating.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
    automaticallyHandleEvents: true,
    onRiveReady: (rive) => {
      console.log('Rive loaded', rive);
      const inputs = rive.stateMachineInputs('State Machine 1');
      inputs.forEach(i => {

        if (i.name === "rating") {
          i.value = 3;
          return;
        }
      });
    }
  });

This lets users set initial values on the rive file before the first render, which is important for some rive graphics that expect values to show up immediately.

@damzobridge

Copy link
Copy Markdown
Contributor Author

Something to think about:

  • This PR adds the callback to UseRiveOptions rather than UseRiveParameters.
    Using it with the hook would look like this if moved to UseRiveParameters:
const { rive, RiveComponent } = useRive({
    src: 'rating.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
    automaticallyHandleEvents: true,
    onLoad: (rive) => {
      const inputs = rive.stateMachineInputs('State Machine 1');
      inputs.forEach(i => {

        if (i.name === "rating") {
          i.value = 3;
          return;
        }
      });
  }
  });

Curious what you think @HayesGordon ?

@HayesGordon

Copy link
Copy Markdown
Contributor

I think your current option feels more Reacty? But the second would increase discoverability. I'm fine with both.

HayesGordon
HayesGordon previously approved these changes Jun 20, 2025

@HayesGordon HayesGordon left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@damzobridge damzobridge changed the title feat: add onLoad callback to useRive hook feat: add onRiveReady callback to useRive hook Jun 23, 2025

@HayesGordon HayesGordon left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks even better!

@damzobridge
damzobridge merged commit ec48759 into main Jun 23, 2025
1 check passed
@damzobridge
damzobridge deleted the feature/on-load-callback branch June 23, 2025 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants