Sponsored

How to animate daisyUI radial progress with react-spring

Jasser Mark Arioste

Jasser Mark Arioste

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. 

Animation of radial progress in daisyUI

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

Sponsored

Install react-spring#

yarn add react-spring
1
Sponsored

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;
1234567891011121314151617181920212223242526272829303132333435

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
Sponsored

Resources#

Credits: Image by Walkerssk from Pixabay

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

Share this post!

Related Posts

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.