React components are merely independent and reusable snippets of code. They are just like JavaScript functions and classes, but work in isolation and returns HTML through a render function. React Components let you split the User Interface and other parts into independent, reusable pieces, and think about each piece in isolation. Not all react components are made equal. This list features the 20 useful react components to use in 2020 for your development needs.
1. React Data Grid
React Data Grid is a powerful JavaScript spreadsheet/grid component built with React.js, for React.js. It has an excel-like interface, complete with keyboard navigation, rich editors and copy/paste. It has features such as fast virtual rendering, the ability to render thousands of rows without any lag, a fully editable gird, custom cell editors, custom cell formatters, resizable columns, filtering, sorting and multiple cell updates.
2. Griddle
Griddle is a very customizable datagrid component for React. Griddle has a customizable architecture that allows for one-off customizations or reusable plugins. Griddle comes with some basic conventions and functionality but gives you the ability to customize just about anything, ranging from components to methods and more.
In a bid to encourage customization reuse, Griddle has added plugin support! The plugins packaged in Griddle customizations can be shared and reused. Want to group behavior and styles that are shared throughout your organization? Have some great ideas you want to share with the world through npm? Plugins are the way to achieve this! Griddle can also be customized to render as a map.
3. React Lazy Load
React Lazy Load is a React component that lets you reload other React components. In addition, you can lazy load images or anything else that affects performance.
4. React Toastify
React Toastify is a React component that lets you add notifications to your React app easily. React Toastify is easy to setup and can be made to work in less than 10 seconds. It is customizable, has RTL support, can display React components inside a toast, has hooks. In addition, you can remove a toast programmatically, define behaviour for each toast, pause a toast when the window loses focus, create a progress bar to display the remaining time, update a toast and control progress bars.
5. React Tooltip
React Tooltip is a React component for creating tooltips. It permits custom events, themes, updates, ability to update tip content over time, ability to compute or enrich tip content, test content and text SVG. In addition, you can override positions of tooltips, especially in cases like custom scrolls, small windows, and iframes.
6. React Burger Menu
This is an off-canvas sidebar React component with a collection of styles and effects, made possible with CSS transitions and SVG animations. React Burger Menu is easy to use and customizable. It has a series of animations such as slide, stack, elastic, bubble, push, rotate and fall. Because React Burger Menu uses CSS3 features, it’s ideal for modern browsers. Some browsers may fail to apply some of the animations correctly. Chrome and Firefox have full support, but Safari and IE exhibit strange behavior for some of the menus.
7. React Sidebar
React Sidebar is a tiny sidebar component for React. It offers features such as; the ability to slide the sidebar over the main content, touch-enabled swiping like in native mobile apps, easy combination with media queries for responsive sidebar display, both left, and right side sidebar display.
8. React StickyNode
React StickyNode is a performant and comprehensive sticky component for awesome React apps. A sticky component wraps a sticky target and keeps the target in the viewport as the user scrolls the page. React StickyNode can also handle cases where the sticky target is taller than the viewport, unlike other sticky React components. To add, there is support for cases where the sticky target uses percentages as its width.
9. React Tabs
Tabs let you break up complex interfaces into more manageable subsections that a user can quickly switch between. Reacts Tabs is here to help you out with this task. React Tabs is an accessible and easy tab component for ReactJS. It has possibilities are endless, with custom CSS styling possible.
10. React Spinners CSS Loaders
React Spinners CSS Loaders is an incredible collection of React spinners components, made with pure CSS. The spinners are based on loading.io and from all over the web. With this React component, no extra CSS imports are needed, no other dependencies are needed and spinners can be installed separately.
11. React Awesome Slider
This is a React content transition slider. Awesome Slider is a 60 frames-per-second, lightweight, performant React component that renders an animated set of production-ready UI general-purpose sliders. It has support for images as well as videos. React Awesome Slider is customizable and extendable using SASS and CSS variables. Key features include; a media pre-loader, touch-enabled, animated transitions, fullscreen possibility and extendable through custom HOC components.
12. React Awesome Button
React Awesome Button is a customizable, lightweight, performant production-ready React UI button component. It has 60fps 3D animated buttons, social icons and network-specific share methods, onPress ripple effect, customizable/extendable via CSS custom properties and SASS variables. In addition, it can be used with CSSModules or just pure CSS.
13. React Scroll
React Scroll is a React component for animating vertical scrolling. The possibilities with React Scroll are almost limitless. For all your scrolling needs, from basic to container to overflow, this component has got you covered. React Scroll has about 3000 stars on Github and over 16500 listed uses, making it a very popular React component. It’s easy to get started with using this component, because of its extensive documentation and several code examples.
14. React Player
This is a React component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vimeo, Twitch, Wistia, and DailyMotion. The React Player component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. You can easily pass in props to control playback and react to various events like media ending, buffering and autoplay. Players can be made responsive based on the user’s screen size.
15. Google Map React
Google Map React is a component for written over a small set of the Google Maps API. This component lets you render any React component on Google Map. Google Map React is fully isomorphic and can be made to render on a server. Even when the Google Maps API is not loaded, it can render map components directly in the browser. In addition to its modifiable, internal algorithm, all map objects can be customized with hover effects. With relative ease, you can create beautiful map interfaces with scroll, zoom, move, hover and click properties.
16. React image gallery
React Image Gallery is a tiny React component for building image galleries and carousels, with thumbnail support. With a small size of 7kb, it is packed with an impressive number of features. Some of these features include support for mobile swipe gestures, thumbnail navigation, custom/beautiful rendered slides, full-screen support, Right-to-left support, lots of customization and responsive design options.
17. React icons
React icons let you easily add SVG icons of popular icon packs into your projects. It uses ES6 imports, permitting you to include only the icons that your project is using. This minimizes size and increases efficiency. Icons can be easily imported from Font Awesome, Ionicons, Material Design icons, Typicons, Github Octicons, Feather, Game icons, Weather icons, Devicons and Ant Design Icons. If you wish, you may add more icons as well. You can customize these icons with CSS.
18. React Credit Cards
This is a component for creating awesome credit cards for your payment forms. React Credit Cards is very easy to use and very customizable. Using CSS, you can modify the card’s size, fonts and other styling based on the credit card brand. Several credit card issuers are supported such as popular ones like Visa, Mastercard as well as lesser-known ones like Hipercard.
19. React Autosuggest
As the name suggests, React Autosuggest is a React autosuggest component. It is WAI-ARIA compliant, having support for ARIA attributes and several keyboard interactions. It is mobile-friendly, controllable (over suggestion rendering) and is highly customizable (supports styling using CSS Modules, JSS, Aphrodite, Radium and more). There’s more. It provides extensive features over the suggesting features of the components. Suggestions can be presented as plain list or multiple sections, be retrieved asynchronously and you have the power to decide when to show suggestions.
20. React Sortable
React Sortable is s sortable list component built with React for React. It is a higher-order component used for creating sortable lists without polyfills and with as minimal implementation as possible. It is compatible with modern Webkit, Firefox and IE browsers. Using just React.js and HTML5 DragEvent interface. React Sortable allows drag-and-drop by attaching the necessary drag event handlers. Unlike other React drag-and-drop components, it has fewer lines of code, can cover both horizontal/vertical scrolling and has well-documented code with unit tests.