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!

A Colorful Twist to Sitecore Content Hub: Changing Avatar Colors for Environment Indication

Welcome back to the Restaurant of Mistaken Orders, where we serve up a delightful mix of tech insights and fun. Today, we're cooking up a new recipe to help you navigate your Sitecore Content Hub environment with ease and style. 

The Problem with the Current Menu

If you're a regular at our restaurant, you're probably familiar with the Chrome plugin that creates an overlay to indicate different environments in Sitecore Content Hub. While it does its job, it's a bit like a dish that's too spicy - always in the way and overpowering the other flavors. 

A New Recipe: Colorful Avatars

We've come up with a new recipe that's subtle yet clear - changing your avatar color to indicate different environments. It's like adding a dash of color to your plate, making it visually appealing and easy to understand. 

Cooking Instructions

Here's how you can change your avatar color in Sitecore Content Hub:

1. Click on your profile icon on the right side of the menu bar to open the Profile and Settings menu.
2. Click on 'Profile'.
3. On the left side of the page, click 'CHANGE AVATAR'.
4. Upload a picture file with the color you want to represent the environment (green, orange, or red). You can do this by either dragging and dropping the file in the upload file area or clicking 'SELECT FILES' and browsing your filesystem to find the desired file.

Remember, this is your avatar, so feel free to get creative with it. You could use a simple colored square, or perhaps a fun icon or image that's predominantly the color you've chosen for the environment. 

Once you've uploaded your image, click 'SET AS AVATAR' to save the photo. And voila! You've got a colorful, environment-indicating avatar.

The Result

By changing your avatar color, you can easily identify the environment you're in without the need for an intrusive overlay. It's a subtle change that can make a big difference in your daily work, much like a pinch of salt in a dish. 

The Takeaway

In the bustling kitchen of Sitecore Content Hub, it's important to find ways to streamline your work and make your environment more user-friendly. Changing your avatar color is a simple yet effective way to do this. 

So, why not give this recipe a try? It might just add that extra flavor you've been looking for in your Sitecore Content Hub experience. 

Until next time, keep experimenting with new recipes in the tech kitchen!