This article was originally published on my personal blog
In 2021, so far, I've worked on multiple React projects of different concepts. Some were small websites, some were on a bigger scale. During my work on these projects, I've run into certain use cases or situations where I needed to find React libraries to help or simplify the work.
In this article, I'll go over 17 React libraries that I've used in my projects and I found very helpful. Note that this list does not include any of the libraries you would use in every React project - for example, React Router or React Helmet. This list will include libraries that would be used when necessary in a project.
React Autosuggest
I've used React Autosuggest in a couple of my projects in 2021. React Autosuggest simplifies creating a typeahead input that suggests some values for the user but allows to also use values out of these suggestions. It provides easy-to-use props that allow you to manage how the component in the library fetches the data, displays the data, gets the value from the user's input or selection from suggested values, and more.
React-Toastify
React-Toastify is a library that allows you to give user feedback using awesome toast-like notifications. For developers, the best part about this library is probably how easy it is to set it up and use, while also providing good-looking toast notifications. I've used it in most, if not all, of my projects in 2021. It's a useful library that can make giving feedback or showing notifications less of a hassle in your project.
react-timer-hook
react-timer-hook provides easy-to-use hooks to handle timers, stopwatches, and time states in your project. This one I used for a very specific use case, where I needed to time how long it took a user to finish a certain task. It might not be a library that you would use in every project, but for its use case, it's definitely helpful.
use-dark-mode-hook
use-dark-mode-hook is actually a library that I created myself. It provides a hook to manage the dark mode's state in your project, and a component that allows toggling dark mode. You can use one without the other as necessary. The reason I decided to create this library is that I previously found libraries that do one or the other - that is a library that either provides the toggler component or the hook. So, I wanted to create a library that combines both solutions. I've used it in some of my projects including sButtons, which is an open-source project I manage.
React-Bootstrap
As the name suggests, React-Bootstrap is a library that has built all Bootstrap components from scratch to be compatible with React. Bootstrap is a famous CSS library that provides components or styles components that you would use frequently in your own project. Using the library as is with React can be a hassle, as a lot of its components are based on nested HTML elements that have certain classes to provide the styling. However, using React-Bootstrap, these components are easily used as ready-made React components in your project.
Material Tailwind
Material Tailwind provides React components that are frequently used in almost every project styled using Tailwind CSS. This library is perfect for your React projects that use Tailwind CSS. It provides a lot of components like Modals, Pagination, Menus, and more, all styled neatly.
Suggested Read: Useful Tailwind CSS Libraries and Plugins.
Formik
Formik is a library that makes building forms in React "without the tears". Forms in React can be a hassle, especially the bigger they get. You have to manage the state of each of the controlled components, handle their validation, show their errors, handle form submissions, and so on. Formik allows you to do all that easily using its Formik component. All you need to do is pass the Formik component what fields are expected to be filled, and it will manage their values, handle changes in the value, and more. Formik also is compatible with Yup, making validation even easier by creating validation schemas and passing them to the Formik component.
Heroicons
Heroicons is an icon library made by the makers of Tailwind CSS. You can download the icons from the website as SVG or get the SVG code to be used in JSX, but you can also use their library which provides the icons as components for React and Vue.js. There are a lot of icon libraries out there, but I liked using Heroicons a lot due to the simple design of the icons, the variety of choosing between solid and outline style for each icon, and its easy usage in my React project. It should be noted that even though this library was created by the makers of Tailwind CSS, you can use it in any project even if it does not use or rely on Tailwind CSS.
React Data Table Component
React Data Table Component is a library that allows you to create data tables with sorting, pagination, and more easily. When working on a project that required creating tables with a lot of data, using pagination, easy cell rendering customization, and more, this library was a big help. It provides a DataTable component that accepts props for the columns and data you want to display, as well as facilitates loading the data from the server with pagination, sorting, and more.
react-dropzone
react-dropzone is a library that provides a simple hook (or alternatively component) to create a dropzone for uploading files. You can specify the file type or size, allow multiple uploads, add preview for the files, and more. This library was very easy to use and its variety of props and event handlers for different use cases allowed to not only use it well as is but also customize it for specific use cases.
React Spinners
React Spinners contains a collection of loading components that you can use in your project. Its variety of loading styles and choices, and its ability to customize these components, make it a good choice to add loading to your React project.
React Transition Group
React Transition Group allows you to perform animations on one or more components as they enter and exit. This can be done by using wrapper components like the CSSTransition component, providing it with "enter" and "exit" class names, and adding inside it the elements that you want to have these animations. It makes handling these transition stages like an element entering or exiting easy to implement.
React Progress Bar
React Progress Bar is a library that provides progress bar components to indicate to the user the current progress in percentage. For example, the user's progress of finishing a quiz is based on the number of questions they finished. It's very easy to use and customize as well.
react-beforeunload
react-beforeunload is a library that provides a hook and a component to allow handling the beforeunload event. This event occurs on the window when the user is about to leave the page. This event is useful to handle when you want to warn the user before leaving that, for example, their changes will not be saved if they leave before saving. So, inside the event handler, you can do a certain check to decide whether the user should see a warning before leaving the page, and if they decide they don't want to leave the page unloads should be canceled and the user will not leave in that case.
Using this library you can handle this event easily using either the useBeforeUnload hook or the BeforeUnload component.
react-simple-pull-to-refresh
react-simple-pull-to-refresh provides a wrapper component that, when the user pulls the page down, allows you to handle refreshing the components in that wrapper. This was useful when implementing a Progressive Web App (PWA) to simulate the same "Pull to Refresh" behavior you would get using a mobile app.
prism-react-renderer
prism-react-renderer provides a very easy way to use Prism.js in React. If you're not familiar with Prism.js, it's a Javascript library that provides beautiful styling and themes for code presentation on your web page. As integrating it with React can be a lot of work, this library allows easy integration, as well as provides a lot of options to customize it.
react-copy-to-clipboard
react-copy-to-clipboard is a library that provides a component to allow users to copy something by clicking on it or on a button. The component is easy to use and simplifies implementing the functionality. The component will act as a wrapper to the component that the user needs to click to copy, and you can specify the text that should be copied, as well as handle the onCopy event.
Conclusion
These are some of the React libraries that facilitated adding or handling certain functionalities in my projects in 2021. If you want to share some of your libraries, make sure to share this article on Twitter, list some of the libraries you've used in 2021, and of course, mention me @shahednasserr in it!
Top comments (0)