Absolutely Awesome React Components & Libraries

React js Interview Questions and Answers

This is a list of AWESOME components. Nope, it’s NOT a comprehensive list of every React component under the sun. So, what does “awesome” mean? Well:

  • It solves a real problem
  • It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it’s not super popular and well-known… no point in listing those.)
  • It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of notes.

UI Components

Editable data grid / spreadsheet

  • ag-grid – Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • gigatables-react – Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  • react-data-grid – Excel-like grid.
  • revo-grid – demo/docs – Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid – demo/docs – Add spreadsheet-like behavior to your app
  • jqwidgets-react-grid – Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

  • Elementz Table – demo/docs – A modern and easy-to-use table packed with all neccessary features, responsive, infinite scrolling & more. 🆕
  • ka-table – demo – Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
  • material-table – demo/docs – Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
  • mui-datatables – Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
  • react-data-table – demo/docs – accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
  • react-table – demo – Hooks for building fast and extendable tables and datagrids
  • rsuite-table – demo/docs – A table component that supports virtualized.
  • sematable – Client side sorting, pagination, and text filter for redux/react based apps.
  • DevExtreme React Grid – High-performance plugin-based data grid for Bootstrap and Material Design.
  • Smart React Grid – Fast and feature-complete data grid with Material Design.
  • KendoReact Grid – Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

Infinite Scroll

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • reboron – A collection of dialog animations with React.js
  • react-aria-modal – A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal – Accessible modal dialog component for React.
  • react-skylight – A react component for modals and dialogs.
  • reoverlay – demo – The missing solution for managing modals.
  • sweetalert2 – demo/docs – A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.
  • sweetalert2-react-content – Official SweetAlert2 enhancer adding support for React elements as content

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

  • react-loader – React component that displays a spinner via spin.js until your component is loaded.
  • react-block-ui – Easy way to block the user from interacting with your UI.
  • react-redux-loading-bar – Simple Loading Bar for Redux and React.
  • react-spinners-css – Amazing collection of react spinners components.
  • react-spinners – A collection of loading spinner components for react.
  • react-content-loader – SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).

Carousel

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

  • chartify – React.js plugin for building animated draggable and customizable charts.
  • essential js 2 charts – Beautiful and interactive charts & graphs for react.
  • jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
  • react-chartist – React component for Chartist.js.
  • react-charty – demo – Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
  • react-chartjs-2 – Common react charting components using Chart.js 2.0.
  • react-d3-components – D3 Components for React.
  • react-dazzle – Dashboards made easy in React JS.
  • react-google-charts – React-google-charts React component.
  • react-highcharts – React-highcharts.
  • react-sigmajs – Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
  • react-sparklines – Beautiful and expressive Sparklines React component.
  • react-timeseries-charts – Declarative timeseries charts.
  • react-vis – Data visualization library based on React and d3.
  • recharts – Redefined chart library built with React and D3.
  • rumble-charts – React components for building composable and flexible charts.
  • victory – Data viz for React.
  • semiotic – Semiotic is a data visualization framework for React.
  • DevExtreme React Chart – High-performance plugin-based chart for Bootstrap and Material Design.
  • Smart React Chart – Feature complete Charting library.
  • react-muze – React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)

Tree

Display a tree data structure

  • react-complex-tree – demo – docs – Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
  • react-treebeard – React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
  • react-treeview – Easy, light, flexible tree view made with React.

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

Map

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

  • iconify-react – Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-icons – Svg react icons of popular icon packs using ES6 imports.
  • react-open-doodles – Awesome free illustrations as react components.
  • react-icomoon – With react-icomoon you can easily use the icons you have selected or created in icomoon.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdown source

Canvas

Sketch input using Canvas or SVG

  • react-konva – React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
  • react-sketch – A Sketch tool for React based applications, backed-up by FabricJS
  • react-sketch-canvas – Demo Freehand vector drawing tool for React using SVG as a canvas. Accepts input from Mouse, touch, and graphic tablets
  • react-heat-map – A lightweight calendar heatmap react component built on SVG, customizable version of GitHub’s contribution graph.

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

  • coloreact – A tiny Color Picker for React.
  • react-color – Is a tiny color picker widget component for React apps.
  • react-colorful – A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
  • react-input-color – React input color component with hsv color picker.

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Let the user define an order on a list

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

  • interweave – React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  • react-designer – Easy to configure, lightweight, editable vector graphics in your react components.
  • react-upload-gallery – React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

UI Layout

Components to layout the app’s UI

  • autoresponsive-react – Auto responsive grid layout library.
  • golden-layout – A multi-screen JavaScript Layout manager.
  • hedron – A no-frills flexbox grid system, powered by styled-components.
  • m-react-splitters – Splitter component, written in TypeScript.
  • muuri-react – demo – docs – Responsive, sortable, filterable and draggable grid layouts.
  • react-grid-layout – A draggable and resizable grid layout with responsive breakpoints, for React.
  • react-masonry-component – Wrapper for @desandro’s Masonry.
  • react-reflex – Flex layout container component for advanced React web applications.
  • react-spaces – demo/docs – Nestable anchored, resizable, scrollable components.
  • react-stonecutter – Animated grid layout component.
  • react-colrow – Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
  • react-schematic – demo – Build responsive layouts using styled schematics without an overhead of any theme configuration

UI Animation

Animate transitions

Parallax

UI Frameworks

Responsive

Set of components + responsive layout system

  • zeit-ui-react – Modern and minimalist React UI library.
  • 🚀 ant-design – demo/docs – A UI Design Language from China. Individual components available.
  • atlaskit – Atlassian’s official UI library, with components from badge to tree table.
  • base web – Base Web is a foundation for initiating, evolving, and unifying web products.
  • carbon – demo/docs – A design system built by IBM.
  • cdbreact – demo – docs – Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
  • chakra-ui – demo/docs – Simple, Modular & Accessible UI Components for your React Applications.
  • evergreen – demo/docs – Evergreen React UI Framework by Segment.
  • fluent-ui – demo/docs – 🌈 React components that inspired by Microsoft’s Fluent Design System.
  • grommet – The most advanced UX framework for enterprise applications.
  • gestalt – demo/docs – A set of components that supports Pinterest’s design language.
  • office-ui-fabric-react – React components for building Microsoft web experiences.
  • orbit-components – Components for building travel oriented projects.
  • pivotal-ui-react – React components based on a custom version of the Bootstrap library.
  • primereact – A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  • react-bootstrap – Bootstrap components built with React.
  • react-foundation – Foundation as React components.
  • reakit – demo/docs Toolkit for building accessible rich web apps
  • rebass – Configurable React Stateless Functional UI Components.
  • searchkit – React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • semantic-ui-react – The official Semantic-UI-React integration.
  • shineout – demo – Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
  • ChatUI – demo/docs – The UI design language and React library for Conversational UI
  • Mantine – demo/docs – A fully featured library with 100+ hooks and components with native dark theme support
  • semi-design – demo/docs – A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps & SaaS products.

Material Design

  • 🚀 Material-UI – Full suite of components. Build your own design system, or start with Material Design.
    • Autocomplete – Accessible autocomplete, combobox, multiselect
    • Icons – 1,000+ SVG material icons.
    • Modal – Accessible modal dialog component.
    • Slider – Accessible slider component.
    • Table – table with sorting, selecting, pagination, virtualized.
    • Tree View – Accessible tree view component for React.
  • react-essence – Essence – The Essential Material Design Framework.
  • react-materialize – Material design for react, powered by materializecss.
  • react-toolbox – A set of React components implementing Google’s Material Design.
  • mdbootstrap – React Bootstrap with Material Design

Mobile

  • antd-mobile – Configurable Mobile UI from China.
  • Ionic React – Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  • OnsenUI – demo/docs – Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

  • blueprint – demo – docs – UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  • dataminr-react-components – Collection of reusable React Components and utility functions.
  • shards-react – docs/demo – A beautiful and modern React design system. Freemium 💰
  • aframe-react – Build virtual reality experiences with A-Frame and React.
  • react-admin – Build admin user experiences on top of REST and GraphQL services.
  • react-desktop – React UI Components for macOS Sierra and Windows 10.
  • refine – demo – docs – Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
  • matrix-card – demo – Simplest possible component to generate matrix rain style cards.
  • rsuite – demo/docs – Suite of components for “enterprise system products”.

UI Utilities

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, <title>, children of

Portal

Render an element at an arbitrary DOM node

  • react-layer-stack – Simple but ubiquitously powerful and agnostic layering system for React.
  • react-portal – React component for transportation of modals, lightboxes, loading bars… to document.body.

Test User Behavior

A/B tests, experiments, …

  • react-ab – Simple declarative and universal A/B testing component for React.
  • react-experiments – React components for implementing UI experiments.

Code Design

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  • alt – Isomorphic flux implementation.
  • baobab-react – React integration for Baobab.
  • cerebral – A state controller with its own debugger.
  • effector-react – React bindings for effector, an effective multi-store state manager.
  • fluorine-lib – Reactive state and side effect management for React using a single stream of actions.
  • fluxible – A pluggable container for universal flux applications.
  • fluxxor – Flux architecture tools for React.
  • kea – High level architecture for React apps.
  • mobx-react – React bindings for MobX. Create fully reactive components.
  • react-3ducks – demo – Simple state management solution for React.
  • react-controllables – Easily create controllable components.
  • react-i13n – A performant, scalable and pluggable approach to instrumenting your React application.
  • react-redux-provide – Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
  • react-redux – Official React bindings for Redux.
  • redux-batched-actions – Reducer + action to reduce actions under a single subscriber notification.
  • redux-batched-subscribe – Store enhancer for which allows batching subscribe notifications.
  • redux – Predictable state container for JavaScript apps.
  • reflux – A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
  • reselect – Selector library for Redux.
  • resourcerer – Declarative data-fetching framework for REST APIs
  • shasta – Dead simple + opinionated toolkit for building redux/react applications.
  • zustand – docs – A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
  • teaful – Tiny, easy and powerful React state management

Form Logic

  • data-driven-forms – A declarative way for building forms with all the functionality.
  • formcat – A simple and easy way to control forms in React using the React Context API
  • formik – Build forms without tears and supports Validation in ease.
  • formsy-react – A form input builder and validator for React JS.
  • plexus-form – A dynamic form component for react using JSON-Schema.
  • react-hook-form – React hooks for form validation without the hassle.
  • react-jsonschema-form – A React component for building Web forms from JSONSchema.
  • react-validation-mixin – Simple validation mixin (HoC) for React.
  • react-final-form – Subscription-based form state management
  • react-formawesome – Complex library for creating awesome forms.
  • surveyjs – The advanced Survey and Form library
  • Formily – High performance, extensible, and Typescript friendly

Router

  • react-breadcrumbs – Automatic breadcrumbs for React-Router.
  • react-router-component – Declarative router component for React.
  • react-router-scroll – React Router scroll management.
  • react-router – A complete routing library for React.
  • redux-first-history – Redux First History – Redux history binding support react-router – @reach/router – wouter
  • redux-router – Redux bindings for React Router – keep your router state inside your Redux store.
  • universal-router – A simple middleware-style router for isomorphic JavaScript web apps.
  • wouter – A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.

Props from server

Component properties asynchronously fetched over the network

  • react-async – Asynchronously fetch data for React components.
  • react-refetch – A simple, declarative, and composable way to fetch data for React components.
  • react-resolver – Async rendering & data-fetching for universal React applications.
  • react-router-relay – Relay integration for React Router.
  • redial – Universal data fetching and route lifecycle management for React etc.
  • redux-async-connect – Request async data, store in redux state, and connect to your component.
  • redux-connect – Provides decorator for resolving async props in react-router.
  • axios-react – HTTP client component for React.

Communication with server

  • adrenaline – Simple Relay alternative.
  • apollo-client – A simple caching client for any GraphQL server and UI framework.
  • react-relay – Relay is a JavaScript framework for building data-driven React applications.

CSS / Style

  • aesthetic – A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
  • aphrodite – It’s inline styles, but they work!.
  • inline-style-prefixer – Run-time Autoprefixer for Inline Style Objects.
  • paperclip – docs – Build UI primitivites with plain HTML & CSS.
  • radium – A set of tools to manage inline styles on React elements.
  • react-container-query – Modular responsive component.
  • react-css-modules – Seamless mapping of class names to CSS modules inside of React components.
  • react-responsive – Media queries in react for responsive design.
  • reactponsive – Responsive components and hooks.
  • styled-components – Visual primitives for the component age.

HTML Template

Isomorphic Apps

  • hypernova – A service for server-side rendering your JavaScript views.
  • isomorphic-relay – Adds server side rendering support to React Relay.
  • isomorphic-style-loader – Isomorphic CSS style loader for Webpack.
  • react-server – React framework with server render for blazing fast page load.
  • rill – Universal web application framework.
  • webpack-isomorphic-tools – Server-side rendering for your Webpack-built applications (e.g. React).

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

Miscellaneous

  • react-inlinesvg – An SVG loader component for ReactJS.
  • react-godfather – A new way to write Functional Components, without Hooks.
  • redux-auth-patch – Complete token authentication system for react + redux that supports isomorphic rendering.
  • redux-search – Redux bindings for client-side search.
  • tcomb-react – Alternative syntax for PropTypes.
  • react-find – ⚛️ Elegant, accessible search component for React.
  • react-universal-hooks – 🎉 support react hooks everywhere (Functional or Class Component).

Utilities

i18n

Internationalization / L10n / localization / translation

  • react-i18next – Internationalization for react done right. Using the i18next i18n ecosystem.
  • react-intl – Internationalize React apps.
  • react-localized – Internationalization for React components based on gettext format.
  • react-translate-maker – Universal internationalization (i18n) open source library for React.
  • react-intl-universal – demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
  • js-lingui – docs – A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

Integrations with Third Party Services

Performance

UI

Inspect

Lazy Load

  • react-infinite-grid – A React component which renders a grid of elements.
  • react-infinite – A browser-ready efficient scrolling container based on UITableView.
  • react-lazy-load – React component that renders children elements when they enter the viewport.
  • react-lazyload – Lazyload your Component, Image or anything matters the performance.
  • react-virtualized – React components for efficiently rendering large lists and tabular data.

App Size

Server-Side Rendering

  • iSSR – The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
  • react-esi – A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

Dev Tools

Test

  • carte-blanche – An isolated development space with integrated fuzz testing for your components.
  • chai-enzyme – Chai.js assertions and convenience functions for testing React Components with enzyme.
  • enzyme – JavaScript Testing utilities for React.
  • jest-cli – Painless JavaScript Testing.
  • react-unit – Lightweight unit test library for ReactJS.
  • redux-test-recorder – A redux middleware to automatically generate tests for reducers through ui interaction.
  • rut – React testing made easy with react-test-renderer. Supports DOM and custom renderers.
  • ui-harness – Create, isolate and test modular UI components in React.
  • unexpected-react – Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.

Redux

Inspect

  • fluxguard – PROD change monitoring that highlights all DOM + design changes.
  • react-inspector – Power of Browser DevTools inspectors right inside your React app.
  • react-json-inspector – React JSON inspector component.
  • reactotron – A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

  • component-controls – demo – docs – A next-generation tool to create blazing-fast documentation sites.
  • cosmos-js – DX tool for designing truly encapsulated React components.
  • react-demo-tab-cli – CLI tool for creating demos of react components.
  • react-heatpack – A ‘heatpack’ command for quick React development with webpack hot reloading.
  • react-styleguidist – React style guide generator.
  • standard-react – JavaScript Standard Style Guide.
  • Plasmic – Powerful design tool for building your React components visually.
  • SimpleLocalize – Open source CLI tool for finding i18n keys in React projects.

Miscellaneous

  • DataFormsJS JSX Loader – Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
  • html-to-react-components – Extract annotated portions of HTML into React components as separate modules.
  • htmltojsx – Automatically AJAXify plain HTML with the power of React. It’s magic!.
  • jsonx – React JSON Syntax.
  • mozaik – Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
  • react-blessed – A react renderer for blessed.
  • jsondiffpatch-react – JSON diffing.

Static Website Generator

  • gatsby – Transform plain text into dynamic blogs and websites using React.js.

Cloud Solutions

Databases

More Technology

Related Topics

Leave a Comment