React is one of the best libraries for front-end development out there.
Part of this is thanks to the amazing community of developers that build amazing libraries that hook right into the existing features.
Here you have a list of the ones you should totally know!
Look at those smoking hot toast notifications!
These easy-to-use, accessible and fully customisable toast notifications deserve a spot in any application.
They are great for just that extra touch of detail when implementing user feedback!
A simple React-Hot-Toast example
You can even try them out live on the website: https://react-hot-toast.com/
The happy ghost of Jotai is your companion for primitive and flexible state management. This incredible piece of software is tiny too, at only 6kb you’ll barely even notice it is there!
A simple Jotai example
With Jotai, you create tiny state containers which we call atoms. Those atoms can then be read and set throughout the rest of your application. Since you use the same atom throughout your application, everything will always be up to date. No more struggling with a state that is out of date!
The amazing animation library is a creation by the team at Framer. It enables you to create animations that run buttery smooth. And the best part? You don’t even need CSS to write them!
No matter how intense the animation, somehow Framer Motion always manages to run it without any struggle! Thanks to their easy API and great documentation you will be up in running in no time.
Example from https://www.framer.com/docs/examples/
Thanks to their AnimatePresence utility you can even animate the entry and exit of components. Which, if you are a React developer you will know, can be a real struggle!
Example from https://www.framer.com/docs/animate-presence/
This one is going to save you a lot of time when you have to handle and verify user input. React-hook-form hooks right into your schema validation library and verifies the user’s input on the go. The perfect way to make sure a form only gets submit when all the right data is there!
Example from https://react-hook-form.com/
The main goal of React-hook-form is reducing the amount of code you need to write to get it working. And let’s be honest, who doesn't dream of writing less code?
Chakra is the simple and modern component kit that allows you to create a frontend in minutes! Their premade components are fully accessible and look incredibly clean.
Example from https://chakra-ui.com/
Their intuitive API also makes it super easy to add your own styling and truly create a unique creation! Since you keep reusing the same components Chakra provides your UI will look coherent and clean across your entire app!
Have a creative day! 💙
More content at plainenglish.io