lottie-setup.md

Lottie Animation

1. Install package

We will use this package to show lottie animations on our site

In your React code terminal run

npm i react-lottie

2. Set up Component

Create a component called LottieControl

import React from  'react'
import Lottie from  'react-lottie';

function LottieControl(props) {

	const { height, width, animation } = props
	
	const defaultOptions = {
		loop: true,
		autoplay: true,
		animationData: animation,
		rendererSettings: {
			preserveAspectRatio: 'xMidYMid slice'
		}
	};
	return (
		<div>
			<Lottie  
				options={defaultOptions}  
				height={height}  
				width={width }
			/>
		</div>
	)
}
export default LottieControl

Now go ahead and invoke that component passing those 3 props, a animation json, width and height.

Happy coding! ❤️