DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 20+ React Libraries to Jumpstart your next project
Idukpaye alex
Idukpaye alex

Posted on

20+ React Libraries to Jumpstart your next project

In the universe of npm, there are a lot of packages to choose from, so knowing which one to choose from can be very difficult. In This article, we will first look at the categories of libraries which are server-side-rendering, animation,state-management, and General Utilities and we will then look at the packages under these categories.

1.General Utilities

The npm packages in this category are just packages that are helpful so few specific tasks and you may eventually need them. The packages in this include:

  1. moment.js -- very good for working with dates
  2. Axios -- good for handling async tasks
  3. React-hot-toast, React-toastify β€” handling small notifications and toasts
  4. react-icons," @mui"/icons-material β€” For icons
  5. react-paginate β€” For pagination
  6. React-share β€” Share things Socially
  7. React-slick, react-responsive-carousel β€” For Carousel
  8. clsx β€” For conditional classes
  9. react-intersection-observer β€” For intersection
  10. react-dropzone β€” For file upload and drag and drop

2. Animation

Bringing animation to your site just makes it more fun and pleasant for your viewers. That being said, the packages under animation include:

  1. GSAP
  2. Framer motion
  3. React-spring
  4. Anime.js

3. State Management

Sometimes the data in your React.js application can be very difficult to manage effectively and the React content API isn't just good enough. That being said, the packages under state management include:

  1. Redux
  2. Redux Toolkit -- my personal favourite
  3. Recoil
  4. Mobx
  5. React Context -- not recommended for big projects

4. server-side rendering

if you are building a highly optimized robust website you will need an SSR framework because they make routing easier, they fetch data on the server and return to the component, they optimize images so it doesn't bottleneck performance, and much more. That being said, the packages under server-side rendering include:

  1. Next.js
  2. Gatsby.js -- for only SSG (static site generation)
  3. Remix
Conclusion

if you enjoyed please do not forget to drop a follow and a reaction and follow me. IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.
Buy Me A Coffee

Top comments (5)

Collapse
 
atinypixel profile image
Aziz Kaukawala

Would like to mention a few:

  • Lodash
  • useHooks-ts: React hook library, ready to use, written in Typescript.
  • Immer: Create the next immutable state tree by simply modifying the current tree.
  • Tiny Invariant: An invariant function takes a value, and if the value is falsy then the invariant function will throw. If the value is truthy, then the function will not throw.

Please suggest if there are any better alternatives!

Happy Coding 🧑

Collapse
 
mojodev profile image
Idukpaye alex Author

but how will you compare it to the others( GSAP and Framer motion)?

Collapse
 
lukeshiru profile image
Luke Shiru

2 things:

  1. You should add links so people can check the libraries without having to google every name.
  2. If you check them yourself, you'll realize that libraries like moment.js are no longer recommended.

Cheers!

Collapse
 
brense profile image
Rense Bakker

Recoil has a much better alternative: Jotai

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await