Enhancing React UI: Choose Between Static Avatars or Lottie Animations

Welcome back to our tech blog, where we serve up delicious code recipes with a side of fun. Today, we're taking a trip to the Restaurant of Mistaken Orders, but don't worry, we're not serving up any culinary mishaps. Instead, we're cooking up a delightful React component that can serve either static or animated avatars.

The Recipe

Our main ingredients for today's dish are the React library, the Lottie-web library, and a sprinkle of Material UI for styling. The Lottie-web library, developed by Airbnb, allows us to render Adobe After Effects animations natively on the web

Here's the code for our AnimatedRobotIcon component:

import { useEffect, useRef } from 'react';

import lottie from 'lottie-web';

import { SxProps } from '@mui/system';

import { Theme } from '@mui/material/styles';

import animationData from './AnimatedRobotIcon.json';

interface AnimatedRobotIconProps {

children?: React.ReactNode;

onClick?: () => void;

sx?: SxProps<Theme>;

animationData?: object;

staticImageSrc?: string;

useLottie?: boolean;

}

function AnimatedRobotIcon({ children, onClick, sx, staticImageSrc, useLottie }: Readonly<AnimatedRobotIconProps>) {

const container = useRef<HTMLDivElement>(null);

const animationInstance = useRef<any>(null);

useEffect(() => {

if (useLottie && container.current) {

const anim = lottie.loadAnimation({

container: container.current,

renderer: 'svg',

loop: true,

autoplay: true,

animationData: animationData,

});

animationInstance.current = anim;

return () => anim.destroy();

}

}, [animationData, useLottie]);

return (

<div ref={container} onClick={onClick}>

{useLottie ? children : <img src={staticImageSrc} alt="Static Avatar" />}

</div>

);

}

export default AnimatedRobotIcon;

The Main Course: AnimatedRobotIcon Component

Our AnimatedRobotIcon component is a versatile dish that can serve up either a static image or an animated avatar, depending on the useLottie prop.

The useEffect hook is the kitchen where the magic happens. If useLottie is true, it uses the Lottie-web library to load an animation into the container ref. The animation data is passed in as a prop, allowing for different animations to be used with the same component. If the component is unmounted, the animation is destroyed to prevent memory leaks. If useLottie is false, the component serves up a static image avatar, using the staticImageSrc prop as the image source.

The Secret Sauce: Best Practices

Our AnimatedRobotIcon component follows several React best practices. It adheres to the Single Responsibility Principle, as it only handles the rendering of an avatar, either static or animated. It also uses prop types to ensure that the correct types of props are passed to the component

The use of the useEffect hook to handle side effects, such as loading and destroying the animation, is another best practice followed in this component

Dessert: Serving the Component

To serve up our AnimatedRobotIcon component, you simply import it into your React application and use it like any other component. You can pass in an onClick prop if you want the avatar to be interactive and a sx prop to apply Material UI styling.

import AnimatedRobotIcon from './AnimatedRobotIcon';

import robotAnimation from './robotAnimation.json';

function App() {

return (

<AnimatedRobotIcon

useLottie={true}

animationData={robotAnimation}

onClick={() => console.log('Avatar clicked!')}

sx={{ width: 100, height: 100 }}

/>

);

}

export default App;

In this example, we're serving up an animated avatar using the robotAnimation data. When the avatar is clicked, it logs a message to the console.

Closing Time

That's it for today's visit to the Restaurant of Mistaken Orders. We hope you enjoyed learning about our AnimatedRobotIcon component and how it can serve up both static and animated avatars. Remember, the best code recipes are the ones that are easy to read, maintain, and reuse. Happy coding!