Layout, Fit, and Alignment

Rive provides powerful layout controls to manage how your animation fits and aligns within its container. This is configured via a Layout object passed to the <Rive /> component or the useRive hook.

The Layout Object

First, import the necessary enums from your chosen renderer package:

import { useRive, Layout, Fit, Alignment } from '@rive-app/react-canvas';

Then, create a new Layout instance and pass it to your component or hook:

const MyAnimation = () => {
  const { RiveComponent } = useRive({
    src: 'layout_test.riv',
    autoplay: true,
    layout: new Layout({
      fit: Fit.Cover, // Change to your desired fit
      alignment: Alignment.TopCenter, // Change to your desired alignment
    }),
  });

  return <RiveComponent style={{ height: '500px', width: '800px' }} />;
}

The Layout constructor accepts an object with the following properties:

fit (Fit enum)

Determines how the artboard is scaled to fit the canvas.

  • Fit.Cover: Scales the artboard to fill the entire canvas, potentially cropping it if aspect ratios differ.
  • Fit.Contain: Scales the artboard to be fully visible within the canvas, potentially leaving empty space (letterboxing).
  • Fit.Fill: Stretches the artboard to fill the canvas, ignoring the original aspect ratio.
  • Fit.FitWidth: Scales the artboard to match the width of the canvas.
  • Fit.FitHeight: Scales the artboard to match the height of the canvas.
  • Fit.None: Does not scale the artboard at all.
  • Fit.ScaleDown: Behaves like None if the artboard is smaller than the canvas, and Contain if it's larger.
  • Fit.Layout: A responsive fit mode that works with Rive's responsive artboard feature. The canvas size is determined by the artboard's rules, and the artboardWidth/artboardHeight on the Rive instance are updated to reflect the new dimensions.

alignment (Alignment enum)

Determines how the artboard is aligned within the canvas, especially when the aspect ratios do not match and letterboxing occurs (e.g., with Fit.Contain).

  • Alignment.TopLeft
  • Alignment.TopCenter
  • Alignment.TopRight
  • Alignment.CenterLeft
  • Alignment.Center (default)
  • Alignment.CenterRight
  • Alignment.BottomLeft
  • Alignment.BottomCenter
  • Alignment.BottomRight

minX, minY, maxX, maxY

These properties allow you to define a custom bounding box for the animation, overriding the default behavior.

By combining Fit and Alignment, you can achieve precise control over how your Rive animations are presented in any layout.