Get best of the week

10 React Components for All Occasions

I believe that to solve various React development tasks it is better to use small highly specialized tools, rather than universal solutions offered by component libraries. I like to choose components on my own, I do not like to read long documentation, and I want to avoid meaningless library updates, after which something in the project often breaks.



A certain front-end library is able to give the developer a uniform design of components, which is extremely important. But it may turn out that the project in which it is planned to use such a library already has its own design system, or its own UI library. In such a situation, the developer is not looking for a new library, but only custom components suitable for reuse and speeding up the work. In such a case, I see more sense in the search for a separate component, rather than a whole library, which contains, at the same time, what a developer really needs, a lot of things that he absolutely does not need.

The material, the translation of which we publish today, is dedicated to the story of 10 React-components.

1. React Awesome Slider - “carousels”



The React Awesome Slider component allows you to create smooth, beautiful, and highly customizable transitions. This is a very small (7 Kb) component that all major browsers support. Here is a demo page of React Awesome Slider.

2. React Data Grid - tables



React Data Grid is a powerful, fast and easy-to-use component that allows you to display something like an Excel worksheet on a page. He knows how to process keyboard commands, copy and paste data, and, in general, behaves as spreadsheets usually behave. This component provides the developer with a simple API that can be dealt with very quickly. See examples of its use here .

3. CogoToast - notifications



Finding a component to implement notifications, given how many such components exist, is not an easy task. There are many excellent components of this orientation, but here I would like to talk about my favorite, about the simple and understandable CogoToast . The component package is modest in size (4 Kb), it has a simple API, and its neat appearance is well suited for many projects. Here is the GogoToast page with examples of the use of this component.

4. Google Maps React - maps



Google Maps React is a fairly popular component that speeds up and facilitates the placement (with coordinates) of other React components on a Google map.

5. React Tooltip - tooltips



React Tooltip is a tooltip implementation component that supports many settings. It fits well with any interface design. This component allows you to do anything you may need with tooltips. For example, it supports custom events, delays, interactive updates for tooltip content, and more.

6. React Block UI - loading and blocking screens



React Block UI is an easy-to-use component that prevents users from interacting with the page interface while loading anything.

7. React Credit Cards - form for entering payment data



I did not plan to include in this review something like “the best component for entering payment data”, but React Credit Cards is just a charming component that I cannot but talk about. It is customizable, working with it is simple and pleasant. It, among other things, automatically determines which company the entered card number corresponds to, and then displays the image of the card with the corresponding logo.

8. React Markdown - rendering of Markdown markup



React Markdown is a fast and convenient solution for rendering Markdown markup (including HTML). He, like the other components from this review, can solve only one problem, but he does his job very well.

9. Coloreact - a tool for choosing colors



Many UI libraries provide developers with their own tools for choosing colors, but Coloreact combines the perfect balance between ease of use and customization. It allows the developer to customize his appearance and behavior, without requiring a lot of time to study their own mechanisms.

10. React Big Calendar - Calendar



If you need a calendar component equipped with all the features that are in the "professional" calendars - this means that you should take a look at React Big Calendar . It gives the developer a lot of opportunities and settings - scheduler functions, localization, date and time formatting, and much more.

Dear readers! What highly specialized React components do you most often use?

More articles:


All Articles