How to animate daisyUI radial progress with react-spring
Jasser Mark Arioste
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-spring1
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:
- React spring takes care of re-rendering the component based on the useSpring settings we configured.
- 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.
- 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!
