How to animate daisyUI radial progress with react-spring

In this tutorial, I’ll show you how to animate daisyUI radial progress using react-spring animation library. React spring is a great animation library with an infinite number of use cases. In my case, I didn’t want to use a react progress library like react-circular-progressbar because I’m already using daisyUI for my project as shown below.

I’m assuming you already installed daisyUI in your project so let’s start.

Install react-spring

yarn add react-spring

Use useSpring hook to modify the styles

Below is how to use useSpring hook to modify the styles of our progress bar.

import type { NextPage } from "next";
//import the necessary modules
import { useSpring, animated } from "react-spring";

const Home: NextPage = () => {
  //use useSpring hook to describe the animation
  //we  start with 0 --value and end with 75, while --size remains constant
  const styles = useSpring({
    from: {
      "--value": 0,
      "--size": "12rem",
    },
    to: {
      "--value": 75,
    },
  });
  
  return (
    <div className="container mx-auto">
      <h1 className="text-2xl">Daisy UI Progress Demo</h1>

      <div className="flex items-center gap-4 p-16">
        <div>
          {/* use animated.div and use the styles from useSpring hook */}
          <animated.div className="radial-progress text-primary" style={styles}>
            {/* animate the value by using .to() method */}
            {styles["--value"].to((v) => v.toFixed(1) + "%")}
          </animated.div>
        </div>
      </div>
    </div>
  );
};

export default Home;

Things to note from above:

1. React spring takes care of re-rendering the component based on the useSpring settings we configured.
2. Change the div to animated.div. Using div will only cause a compile time error because the style object is different from the usual style object.
3. We used .to() method to animate the value

Resources

React spring docs - https://react-spring.dev/#introduction DaisyUI docs - https://daisyui.com/components/

Credits: Image by Walkerssk from Pixabay

Thanks for reading! If you like tutorials like this, make sure to subscribe to our newsletter below!