awesome-react-components

Источник: awesome-react-components — синхронизируется из внешнего репозитория как sparse-субмодуль (только список).

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 note.

See also: Awesome React Frameworks.

Maintainers:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Contributing

#

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

Table of Contents

#

• UI Components
  • Editable data grid / spreadsheet
  • Table
  • Infinite Scroll
  • Overlay
  • Notification
  • Tooltip
  • Menu
  • Sticky
  • Tabs
  • Loader
  • Captcha
  • Carousel
  • Buttons
  • Collapse
  • Chart
  • Command palette
  • Tree
  • UI Navigation
  • Custom Scrollbar
  • Audio / Video
  • Map
  • Time / Date / Age
  • Photo / Image
  • Icons
  • Paginator
  • Markdown Viewer
  • Canvas
  • Screenshot
  • Miscellaneous
  • Form Components
    • Date / Time picker
    • Emoji picker
    • Input Types
    • Autocomplete
    • Select
    • Color Picker
    • Toggle
    • Slider
    • Radio Button
    • Type Select
    • Tag Input
    • Autosize Input / Textarea
    • Star Rating
    • Drag and Drop
    • Sortable List
    • Rich Text Editor
    • Markdown Editor
    • Image Editing
    • Form Component Collections
    • Miscellaneous
    • Syntax Highlight
• UI Layout
• UI Animation
  • Parallax
• UI Frameworks
  • Responsive
    • Material Design
  • Mobile
  • Component Collections
• UI Utilities
  • Reporter
    • Visibility Reporter
    • Measurement Reporter
  • Device Input
    • Keyboard Events
    • Scroll Events
    • Touch Swipe
    • Mouse Events
  • Meta Tags
  • Portal
  • Test User Behavior
• Code Design
  • Data Store
  • Form Logic
  • Router
  • Props from server
  • Communication with server
  • CSS / Style
  • HTML Template
  • Isomorphic Apps
  • Boilerplate
  • Miscellaneous
• Utilities
  • i18n
  • Framework bindings / integrations
  • Integrations with Third Party Services
• Performance
  • UI
    • Inspect
    • Lazy Load
  • App Size
  • Server-Side Rendering
• Dev Tools
  • Test
  • Redux
  • Inspect
  • Miscellaneous
• Miscellaneous
  • Static Website Generator
• Cloud Solutions
  • Databases

UI Components

#

Back to top ⬆️

Editable data grid / spreadsheet

#

• AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
• fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
• gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
• Handsontable - demo - docs - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
• jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
• MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
• react-data-grid - Excel-like grid.
• ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
• revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.

Table

#

• ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.

• mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features

• 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

• TanStack Table - demo - Headless UI for building powerful tables & datagrids

• react-table-library - demo - React Table Library – an almost headless table library – for building better tables.

• rsuite-table - demo/docs - A table component that supports virtualized.

• 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.

• simple-table - demo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.

• KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

• Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript

Infinite Scroll

#

• @egjs/react-infinitegrid - npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
• react-lazyload - Lazyload your Component, Image or anything else where the performance matters.
• react-list - A versatile infinite scroll React component.
• @af-utils/virtual - demo/docs - Render large scrollable lists and grids.
• react-window - demo - React components for efficiently rendering large lists and tabular data
• virtua - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.

Overlay

#

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

• react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
• react-modal - Accessible modal dialog component for React.
• @paratco/async-modal - Simple async modal handler for React.
• 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

• react-notifications-component - demo - Highly customizable and easy-to-use component for notifications.
• notistack - demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
• react-local-toast - demo - docs - show feedback linked to particular component instead of app-wide toasts.
• react-toast - demo - docs - Minimal toast notifications.
• 🚀 react-toastify - demo - best bet out there at the moment. Hooks support. No refs.
• react-confirm-lite - demo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
• reapop - A React & Redux notifications system.
• react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
• Sonner - An opinionated toast component for React.

Tooltip

#

• react-tooltip - React tooltip component.

Menu

#

Menus / sidebars

• hamburger-react - demo/docs - Animated hamburger menu icons for React.
• react-burger-menu - An off-canvas sidebar with effects and styles.
• react-offcanvas - Off-canvas menus for React.
• react-planet - demo - Create circular menus which looks like planets.
• mantine-contextmenu - demo/docs - Context-menu hook/component for applications built with Mantine UI.

Sticky

#

Fixed headers / scroll-up headers / sticky elements

• react-headroom - Hide your header until you need it.
• react-stickynode - A performant and comprehensive React sticky.

Tabs

#

• react-tabs - React tabs component.
• react-tabtab - React, tabs.

Loader

#

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

• react-loader-spinner - Collection set of react-spinner for async operation.
• 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).

Captcha

#

• react-simple-captcha - npm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
• procaptcha - demo - docs - Privacy focused free CAPTCHA

Carousel

#

• @egjs/react-flicking - npm - demo - It’s reliable, flexible and extendable carousel.
• react-awesome-slider - demo - Fullpage, 3D animated, 60fps media and content slider/carousel.
• pure-react-carousel - Built from scratch and not highly opinionated.
• react-id-swiper - A library to use idangerous Swiper as a ReactJs component
• react-instagram-zoom-slider - demo - A slider component with pinch to zoom capabilities inspired by Instagram.
• react-responsive-carousel - React.js Responsive Carousel (with Swipe).
• react-slick - React carousel component.
• keen-slider - demo - Performant carousel/slider with native touch/swipe behavior.
• swiper - demo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Buttons

#

• react-awesome-button - demo - 3D animated 60fps buttons with load progress and social share actions.
• reactive-button - demo - docs - A beautiful animated button component with progress indicator.

Collapse

#

…превью ограничено; полный список — в репозитории.