How to control the type being rendered by react-Lottie (svg/video tag)

[yael-screenovate]

I rendered two react-Lottie animations my app. One shows in the dom as video tag. and one shows as SVG tag. How do I control the type being rendered?

[karamalie]

hi @yael-screenovate
you could pass in a renderer prop and set it as 'svg'

[karamalie]

<Player
ref={this.player} // set the ref to your class instance
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
renderer='svg'
>

[yael-screenovate]

Hey @karamalie,
i get the following error:

Type '{ loop: boolean; renderer: string; autoplay: true; animationData: any; rendererSettings: { preserveAspectRatio: string; }; }' is not assignable to type 'Options'.
Object literal may only specify known properties, and 'renderer' does not exist in type 'Options'.ts(2322)

This is my options type:

/**
* Defines if the animation should play only once or repeatedly in an endless loop
* or the number of loops that should be completed before the animation ends
/
loop?: boolean | number;
/*
* Defines if the animation should immediately play when the component enters the DOM
/
autoplay?: boolean;
/*
* The JSON data exported from Adobe After Effects using the Bodymovin plugin
/
animationData: any;
rendererSettings?: {
preserveAspectRatio?: string;
/*
* The canvas context
/
context?: any;
scaleMode?: any;
clearCanvas?: boolean;
/*
* Loads DOM elements when needed. Might speed up initialization for large number of elements. Only with SVG renderer.
/
progressiveLoad?: boolean;
/*
* Hides elements when opacity reaches 0. Only with SVG renderer.
* @default true
*/
hideOnTransparent?: boolean;
className?: string;

[karamalie]

could you show me the player code as well? and the version of the package you re using

[yael-screenovate]

const defaultOptions: Options = { loop: true, autoplay: true, animationData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; return ( <Lottie options={defaultOptions}/> );

[karamalie]

could you pass in the props directly in as ive demoed in the previous comment and give it a try

[yael-screenovate]

You mean like this:

<Lottie renderer='svg' loop={true} autoplay={true} animationData={this.props.Data} rendererSettings={preserveAspectRatio: 'xMidYMid slice'} /> );

?

I still get an error:

(JSX attribute) renderer: string
No overload matches this call.
Overload 1 of 2, '(props: LottieProps | Readonly): Lottie', gave the following error.
Type '{ renderer: string; loop: boolean; autoplay: boolean; animationData: any; rendererSettings: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'renderer' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: LottieProps, context: any): Lottie', gave the following error.
Type '{ renderer: string; loop: boolean; autoplay: boolean; animationData: any; rendererSettings: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'renderer' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.ts(2769)

[karamalie]

these are the available props. rendererSettings is not a prop. animationData is not a prop either. it should be src. have a look at the photo

[yael-screenovate]

Im using react-Lottie (as the title of the question says.) Here are the list of props for it https://www.npmjs.com/package/react-lottie

[karamalie]

this is the repo attached to this player https://www.npmjs.com/package/@lottiefiles/react-lottie-player that ones a different player hehe

[karamalie]

Closing this issue as the package usage differs from that of this repo :)