Ahoy there, As a React developer it's always good to have a trusted library by your side. Just like the famous Pirates of the Caribbean, who had their trusty compasses and maps to navigate the seas. We have our libraries to navigate the world of React development. In this trip of sea of React libraries, we'll take a look at some of the most popular libraries you should know as a React developer.
Secure your ship for the storm ahead, let's batten down the hatches together..
I. Redux - The Treasure Chest
Just like a treasure chest that holds all the valuable treasure for the pirates, Redux holds all the state data in your React app. It's a predictable state container that helps you manage the state of your app in a structured way. Redux helps you maintain a single source of truth, making it easier to manage your app's state.
To integrate Redux, you can install it using npm or yarn and then create a store with the createStore function.
To show you what I mean..
II. Axios - The Parrot
Just like a parrot that can deliver messages between different pirates. Axios is a library that helps you send HTTP requests to a server. It's a promise based library that makes it easy to communicate with APIs and fetch data for your app. Axios can be used in both client side and server side apps.
Let's say you can use it to manage your app's state in a centralized store. Yo ho, yo ho! It's now easy to share data between components.
III. React Spring - The Cannon
Just like a cannon that provides firepower to a pirate ship, react-spring provides the firepower to your React components. It's a library that makes it easy to add animation and interactivity to your components. With react-spring you can create fluid and dynamic animations that bring your app to life.
Let's say you can use it to create smooth and dynamic animations and transitions.
IV. React Popper - The Telescope
Just like a telescope that helps a pirate see things from a distance, react-popper helps you position and align elements in your app. It's a library that makes it easy to create tooltips, dropdowns and popovers in your React app. Using it you can create dynamic and interactive UI elements that enhance your app's user experience.
V. SWR - The Spyglass
Just like a spyglass that helps a pirate see what's ahead, SWR helps you manage data fetching in your React app. It's a library that provides a caching mechanism for data fetching. With SWR, it's easy to manage and update data in real time and you can create fast and responsive apps that keep your users engaged.
Components will get a stream of data updates constantly and automatically. The UI will be always fast and reactive.
VI. Recharts - The Sextant
Just like a sextant that helps a pirate navigate the seas, Recharts helps you navigate your data in your React app. It's a library that provides a set of charting components that can be easily integrated into your app. With Recharts, you can create beautiful and dynamic charts that help you visualize and understand your data.
You can refer to the tutorial below to view Recharts in action:
VII. Tailwind CSS - The Ship's Flag
Just like a ship's flag that represents the identity and spirit of a pirate crew, TailwindCSS represents the identity and style of your React components. It's a utility-first CSS framework that allows you to quickly and easily style your components. With TailwindCSS, you can create beautiful and responsive designs without writing any CSS.
You can refer to the tutorial below to view Tailwind CSS in action:
VIII. React Big Calendar - The Schedule Treasure
react-big-calendar helps you manage your schedule in your React app. It's a library that provides a set of customizable calendar components that can be easily integrated into your application. With react-big-calendar, you can create dynamic and interactive calendars that help you manage your schedule.
IX. Prettier - The Ship's Crew
Just like a pirate crew that works together to keep the ship sailing smoothly, Prettier works together with other libraries to keep your React code formatted and consistent. It's a library that provides a set of code formatting rules that can be easily integrated into your development workflow. With Prettier, you can ensure that your code is formatted consistently and is easy to read and maintain.
To integrate Prettier, you can install it using npm or yarn and then add a .prettierrc file to your project with your desired configurations:
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
X. React Hook Form - The Compass
Just like a compass that helps a pirate navigate their way, React Hook Form is a library that helps you build forms in your React application. It's a lightweight library that makes it easy to validate and manage form data in a simple and efficient way.
XI. Framer Motion - The Jolly Roger
Just like the Jolly Roger that represents a pirate crew, Framer Motion represents your app's animations and transitions. It's a library that provides a set of animation and transition components that can be easily integrated into your app. With Framer Motion, you can create dynamic and engaging animations that bring your app to life such as page transitions, hover effects and scroll animations.
XII. React Spinners - The Anchor
Just like an anchor that helps a pirate's ship stay stable in rough seas, React Spinner helps you manage loading states in your React app. It's a library that provides a set of customizable loading spinner components that can be easily integrated into your app. With React Spinner, you can create smooth and responsive loading states.
You can refer to the examples of storybook
XIII. React Intl - The Parrot's Tongue
Just like a parrot that can speak different languages, React Intl helps you internationalize your React app. It's a library that provides a set of tools for formatting and displaying localized content. With React Intl, you can create apps that can be easily translated and localized for different regions and languages.
XIV. Moment - Sailing the Seas of Time
MomentJS is a JavaScript library which helps is parsing, validating, manipulating and displaying date/time in JavaScript in a very easy way. This chapter will provide an overview of MomentJS and discusses its features in detail. Moment JS allows displaying of date as per localization and in human readable format.
moment().format('MMMM Do YYYY, h:mm:ss a'); // March 6th 2023, 7:25:45 pm
moment().format('dddd'); // Monday
moment().format("MMM Do YY"); // Mar 6th 23
moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023
moment().format(); // 2023-03-06T19:25:45+05:30
XV. Lodash - The Secret Weapon
Lodash library provides a set of utility functions that can help you simplify your code and make it more efficient. With Lodash, you can do things like iterate over arrays and objects, manipulate strings and numbers and perform other common tasks.
import _ from 'lodash';
function MyComponent() {
const numbers = [1, 2, 3, 4, 5];
const sum = _.sum(numbers);
return (
<div>
<h1>The sum of {numbers.join(', ')} be {sum}</h1>
</div>
);
}
XVI. Formik: The Black Pearl
Formik is third party React form library. It provides basic form programming and validation. It is based on controlled component and greatly reduces the time to do form programming. In ReactJS, the purpose of Formik is to create a scalable and performant form helper with a very simple API. Other React form management tools such as Redux Form are available.
You can refer to the tutorial below to see Formik in action:
❤ Motivation:
🍀Support
Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!
Top comments (22)
Great List! ❤️
You can replace moment.js with dayjs - Fast 2kB alternative to Moment.js with the same modern API!
I guess you missed the Quartermaster: Any one is a must for strict form/data validator!
Completely agree. moment.js is not a best choice for today. If I'm not mistaken it's even mention in official docs of moment.js.
Thank you for your feedback. I will update the article. What about date-fns library?
Haven't use date-fns, however dayjs is almost identical to moment.js which makes migrating easier for those who are familiar with moment.js.
Ok will update the article accordingly
Thank you for your feedback. I will consider it
Great list!
I mostly use Angular these days. When I used to use React, I definitely found Redux and Lodash really useful.
Yes I completely agree with you. Thank you reading it and adding your valuable feedback..
What a completely random list of things. Why did you not include any lightbox like script, for example, Fancybox5?
There are so many things to add. I just mentioned only few things I used before and liked.
Really good article! It's a insightful and informative read!
Thank you for your kind words..
Really great post, I have used some of the libraries and got to know many more.
Thank you bro. I'm glad you found it helpful..
This is now my go to list for my next React project
Thank you for your feedback. I'm happy to hear that you found it helpful and has become your go to list for your next React project. Best of luck on your next..
great and powerful stack!
Thank you for reading it and adding your valuable feedback
This post was amazing, I really enjoyed it.
Thank you Benjamin. I'm glad you enjoyed it..
Great post!
Thank you 🙏 sir for your appreciation