Introduction
Do you ever think about adding a CSS condition to control a CSS behavior?
It will be hard and will include a lot of if statements most of the time.
Here is how you can control your styling through an x-state state machine.
Coding
First installing
npm install xstate @xstate/react
Let's build the machine. We'll design three possible states: idle, loading, and success.
To simulate, I added an automatic transition (this is the after with time in JSON).
Now that we have finished the machine, let's integrate it with the react code.
We will create a new data attribute called data-state.
This data attribute will contain the current state.
We are almost done, let's add CSS behavior.
you need to create CSS selector like this
.btn[data-state='loading']
Congratulations we done.
The full code -
https://stackblitz.com/edit/vitejs-vite-wjcxwo?file=src/App.jsx
please run this line in terminal
npm run dev
Conclusion
I like this approach.
I can design the state's behavior using x-state, then control it via CSS selector and assign the relevant attributes.
I think it gives a lot of power and simplicity to your styling ecosystem.
Top comments (0)