It’s time to embrace the dark side.
Today, I’ll show you how to create a dark mode react application with zustand (german) and Tailwind CSS. Let’s begin!
First off, what’s zustand?
Zustand is a small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like.
If you are familiar with
redux, this should be a piece of cake for you.
I am going to use create-react-app for this application. Fire up your terminal and run the following command
npx create-react-app react-dark-mode
Before we start…
Ever wondered how React implements hooks under the hood? React is an open-source library but navigating through thousands of lines of codes can be quite intimidating.
Although React hooks were first introduced back in 2018, I started using them not too long ago.
Hooks are great! Clean Code, easier to debug, functional components and most importantly: you don’t have to worry about this anymore. All this is great, but there were a few questions that remained unanswered for me.
How does it work?
Since functional components are just functions, How do components preserve their previous state after each re-render?
Recently, I had to implement an OTP sending functionality into our application. This came in handy when the SMS-service we used did not respond. As many applications do, we decided to add this feature.
Since this is just a button, it’s crucial to make sure that the user is not requesting for an OTP a thousand by repeatedly clicking on the same button. This is where a countdown timer might come in, we can allow the user to request an OTP once 30 seconds have passed since their first OTP.
Here, we will go through the process of building a…