Properties

The DotLottieReact component extends the HTMLCanvasElement Props and accepts all the props that the HTMLCanvasElement accepts. In addition to that, it also accepts the following props:

Property name	Type	Default	Description
`autoplay`	boolean	false	Auto-starts the animation on load.
`loop`	boolean	false	Determines if the animation should loop.
`src`	string	undefined	URL to the animation data (`.json` or `.lottie`).
`speed`	number	1	Animation playback speed. 1 is regular speed.
`data`	string \| ArrayBuffer	undefined	Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
`mode`	string	”forward”	Animation play mode. Accepts “forward”, “reverse”, “bounce”, “reverse-bounce”.
`backgroundColor`	string	undefined	Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., “#000000”, “#000000FF”).
`segment`	[number, number]	[0, totalFrames - 1]	Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
`renderConfig`	RenderConfig	`{}`	Configuration for rendering the animation.
`playOnHover`	boolean	false	Determines if the animation should play on mouse hover and pause on mouse out.
`dotLottieRefCallback`	React.RefCallback<DotLottie \| null>	undefined	Callback function that receives a reference to the dotLottie web player instance.
`useFrameInterpolation`	boolean	true	Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true.
`marker`	string	undefined	The Lottie named marker to play.
`animationId`	string	undefined	The ID of the animation to play.
`themeId`	string	undefined	The ID of the theme to apply.
`themeData`	string	undefined	Theme data to apply as a string.
`layout`	Layout	undefined	Layout configuration for fitting the animation.
`stateMachineId`	string	undefined	The ID of the state machine to load.
`stateMachineConfig`	StateMachineConfig	undefined	Configuration for state machine behavior.
`loopCount`	number	0	Number of loops to play (0 for infinite).

RenderConfig

The renderConfig object accepts the following properties:

Property name	Type	Default	Description
`devicePixelRatio`	number	window.devicePixelRatio \| 1	The device pixel ratio.
`renderConfig.autoResize`	boolean	true	Determines if the canvas should resize automatically to its container

Layout

The layout object accepts the following properties:

Property name	Type	Default	Description
`fit`	’contain’ \| ‘cover’ \| ‘fill’ \| ‘none’ \| ‘fit-width’ \| ‘fit-height'	'contain’	How to fit the animation in the canvas
`align`	[number, number]	[0.5, 0.5]	Alignment within canvas [x, y] from 0 to 1

StateMachineConfig

The stateMachineConfig object accepts the following properties:

Property name	Type	Description
`openUrlPolicy`	object	URL opening policy configuration
`openUrlPolicy.requireUserInteraction`	boolean	Require user interaction before opening URLs
`openUrlPolicy.whitelist`	string[]	Allowed URL patterns