DEV Community

Cover image for 4 useful react npm packages for beginners
Nabil Alamin
Nabil Alamin

Posted on • Originally published at arndom.hashnode.dev

4 useful react npm packages for beginners

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 😉

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:

  • npm install the package:
  npm install aos --save
Enter fullscreen mode Exit fullscreen mode
  • Initialise in the app.js:
  AOS.init();
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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:

  • npm install the package :
npm i svg-loaders-react
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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 👋

end giph

Discussion (0)