BlogLinkedin

React Questions:

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

Carousel

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

Tree

Display a tree data structure

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.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow 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 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

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.

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

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

Boilerplate

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

Miscellaneous

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

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

PreviousReact InterviewNextFront End Questions

Last updated