Hey guys so this is gonna be a brief one where we'll talk about npm packages that I found very useful while learning react. Here they are 🔽🔽🔽.

TLDR 😉

• AOS for animations

• SVG-loaders-react for loading overlays

• Material-ui/core for styling

• Material-ui/icons for icons

Reasons to use 📝

AOS

Finding out about the Animate On Scroll library was something I was really grateful for, I had previously used libraries that required forward ref and some ground work to get them working but with this, it was quite simple:

1. npm install the package:

   npm install aos --save
   

2. Initialise in the app.js:

   AOS.init();
   

3. That's it, you can add any of the popular animations they support:

   <div data-aos="fade-left">
   // content you want to fade from the left
   </div
   

SVG-loaders-react

Add a loader when a process is being carried out in your app is something small but adds a ton to your overall your experience. This library provides easy and intuitive svg loaders for your React app:

1. npm install the package :

   npm i svg-loaders-react
   

2. Import and use any of the number of loaders they provide:

    import { Bars } from 'svg-loaders-react'
   
    //used like this 
    <Bars/>
   
    //more components can be found on the npm site
   

Material-UI Core & Icons

Now I know most of us have heard and even used this but I wanna bring it up again because of how useful and easy to use I find it.

The functionalities they provide are very intuitive, responsive and quick to pick up. The documentation is also very wonderful and easy to follow.

For installation and use click the flag ⛳

Conclusion

So those are some nice packages I use very frequently that make things a bit easier during development. Anyway, have a great one 👋