diff --git a/.github/workflows/update-table-of-contents.yml b/.github/workflows/update-table-of-contents.yml new file mode 100644 index 0000000..df623d0 --- /dev/null +++ b/.github/workflows/update-table-of-contents.yml @@ -0,0 +1,19 @@ +name: 'Update Table of Contents' + +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + update_toc: + runs-on: ubuntu-latest + steps: + - name: git checkout + uses: actions/checkout@v2 + + - name: TOC Generator + uses: technote-space/toc-generator@v2.4.0 + with: + TOC_TITLE: '## Table of Contents' diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 031a5c9..b4322d0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,16 @@ Please abide by the following: -- List the component alphabetically. -- Reference it only once. -- Describe it succinctly, sufficiently, and without flair. (No line wrap in your listing.) +- Keep the alphabetic sort order of components. +- Reference a component only once. +- Describe it succinctly, sufficiently, and without flair. +- Don't mention "React" in the description. +- Keep descriptions to one line (no wrapping). Use the `Preview changes` tab before committing to ensure this. - If available, please also include a direct link to a demo site. - If available, please also include a direct link to a separate docs site. -- Don't mention "React" in the description. + +Here's an example of how your listing should appear: + +- [React](https://github.com/facebook/react) - [demo](https://reactjs.org/) - [docs](https://reactjs.org/docs/getting-started.html) - A declarative, efficient, and flexible JavaScript library for building user interfaces. # TO ADD A LISTING, YOU MUST REMOVE ONE (or more) UN-AWESOME COMPONENT IN ANY PR. @@ -15,7 +20,3 @@ We want this list to remain fresh. So when you do ANY PR, please also remove at 1 un-awesome component. This could be a component that hasn't been updated in a year or more; a component that has been replaced by better options; or one that just doesn't really seem "awesome" anymore. - -Here's an example of how your listing should appear: - -- [React](https://github.com/facebook/react) - [demo](https://reactjs.org/) - [docs](https://reactjs.org/docs/getting-started.html) - A declarative, efficient, and flexible JavaScript library for building user interfaces. diff --git a/README.md b/README.md index 9657802..5dda824 100644 --- a/README.md +++ b/README.md @@ -4,93 +4,217 @@ 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 +- 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. -Let me know how we can improve this list! +See also: [Awesome React Frameworks](https://github.com/brillout/awesome-react-frameworks). -- [@petebray](https://twitter.com/petebray) (current maintainer with a shameless plug of my [React app](https://fluxguard.com) for monitoring - PROD website changes) +Maintainers: + +- [@petebray](https://github.com/bluepeter), author of [Fluxguard](https://fluxguard.com) — monitor PROD website changes. +- [@brillout](https://twitter.com/brillout), author of [Vike](https://vike.dev) — a fast Vite-based React framework that is flexible, lean, community-driven and dependable. ### Contributing -Please review our [contributing guidelines](https://github.com/brillout/awesome-react-components/blob/master/CONTRIBUTING.md). +Please review our [contributing guidelines](https://github.com/brillout/awesome-react-components/blob/master/CONTRIBUTING.md). 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](#ui-components) + - [Editable data grid / spreadsheet](#editable-data-grid--spreadsheet) + - [Table](#table) + - [Infinite Scroll](#infinite-scroll) + - [Overlay](#overlay) + - [Notification](#notification) + - [Tooltip](#tooltip) + - [Menu](#menu) + - [Sticky](#sticky) + - [Tabs](#tabs) + - [Loader](#loader) + - [Captcha](#captcha) + - [Carousel](#carousel) + - [Buttons](#buttons) + - [Collapse](#collapse) + - [Chart](#chart) + - [Command palette](#command-palette) + - [Tree](#tree) + - [UI Navigation](#ui-navigation) + - [Custom Scrollbar](#custom-scrollbar) + - [Audio / Video](#audio--video) + - [Map](#map) + - [Time / Date / Age](#time--date--age) + - [Photo / Image](#photo--image) + - [Icons](#icons) + - [Paginator](#paginator) + - [Markdown Viewer](#markdown-viewer) + - [Canvas](#canvas) + - [Screenshot](#screenshot) + - [Miscellaneous](#miscellaneous) + - [Form Components](#form-components) + - [Date / Time picker](#date--time-picker) + - [Emoji picker](#emoji-picker) + - [Input Types](#input-types) + - [Autocomplete](#autocomplete) + - [Select](#select) + - [Color Picker](#color-picker) + - [Toggle](#toggle) + - [Slider](#slider) + - [Radio Button](#radio-button) + - [Type Select](#type-select) + - [Tag Input](#tag-input) + - [Autosize Input / Textarea](#autosize-input--textarea) + - [Star Rating](#star-rating) + - [Drag and Drop](#drag-and-drop) + - [Sortable List](#sortable-list) + - [Rich Text Editor](#rich-text-editor) + - [Markdown Editor](#markdown-editor) + - [Image Editing](#image-editing) + - [Form Component Collections](#form-component-collections) + - [Miscellaneous](#miscellaneous-1) + - [Syntax Highlight](#syntax-highlight) +- [UI Layout](#ui-layout) +- [UI Animation](#ui-animation) + - [Parallax](#parallax) +- [UI Frameworks](#ui-frameworks) + - [Responsive](#responsive) + - [Material Design](#material-design) + - [Mobile](#mobile) + - [Component Collections](#component-collections) +- [UI Utilities](#ui-utilities) + - [Reporter](#reporter) + - [Visibility Reporter](#visibility-reporter) + - [Measurement Reporter](#measurement-reporter) + - [Device Input](#device-input) + - [Keyboard Events](#keyboard-events) + - [Scroll Events](#scroll-events) + - [Touch Swipe](#touch-swipe) + - [Mouse Events](#mouse-events) + - [Meta Tags](#meta-tags) + - [Portal](#portal) + - [Test User Behavior](#test-user-behavior) +- [Code Design](#code-design) + - [Data Store](#data-store) + - [Form Logic](#form-logic) + - [Router](#router) + - [Props from server](#props-from-server) + - [Communication with server](#communication-with-server) + - [CSS / Style](#css--style) + - [HTML Template](#html-template) + - [Isomorphic Apps](#isomorphic-apps) + - [Boilerplate](#boilerplate) + - [Miscellaneous](#miscellaneous-2) +- [Utilities](#utilities) + - [i18n](#i18n) + - [Framework bindings / integrations](#framework-bindings--integrations) + - [Integrations with Third Party Services](#integrations-with-third-party-services) +- [Performance](#performance) + - [UI](#ui) + - [Inspect](#inspect) + - [Lazy Load](#lazy-load) + - [App Size](#app-size) + - [Server-Side Rendering](#server-side-rendering) +- [Dev Tools](#dev-tools) + - [Test](#test) + - [Redux](#redux) + - [Inspect](#inspect-1) + - [Miscellaneous](#miscellaneous-3) +- [Miscellaneous](#miscellaneous-4) + - [Static Website Generator](#static-website-generator) +- [Cloud Solutions](#cloud-solutions) + - [Databases](#databases) + + ## UI Components -### Table / Data Grid +**[`Back to top ⬆️`](#table-of-contents)** + +### Editable data grid / spreadsheet -- [ag-grid](https://github.com/ceolter/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. -- [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto Responsive Layout Library For React. +- [fortune-sheet](https://github.com/ruilisi/fortune-sheet) - An online spreedsheet component that provides out-of-the-box features just like Excel. +- [AG Grid](https://github.com/ag-grid/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. - [gigatables-react](https://github.com/GigaTables/reactables) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. -- [griddle-react](https://github.com/GriddleGriddle/Griddle) - Simple Grid Component written in React. -- [mui-datatables](https://github.com/gregnb/mui-datatables) - Advanced and Pretty Data Tables where everything is customisable. -- [react-data-components](https://github.com/carlosrocha/react-data-components) - React components for sorting, filtering and pagination of data. +- [MUI X Data grid](https://github.com/mui/mui-x) - [demo/docs](https://mui.com/x/react-data-grid/) - Fast and customizable data grid with advanced features for power users and complex use cases. - [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid. -- [react-pivot](https://github.com/davidguttman/react-pivot) - Data-grid component with pivot-table-like for data display, filtering, and exploration. -- [reactable](https://github.com/glittershark/reactable) - Fast, flexible, and simple data tables in React. -- [reactabular](https://github.com/reactabular/reactabular) - Spectacular tables for React. +- [revo-grid](https://github.com/revolist/revogrid) - [demo/docs](https://revolist.github.io/revogrid/) - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization. +- [ReactGrid](https://github.com/silevis/reactgrid) - [demo/docs](https://reactgrid.com/docs/) - Add spreadsheet-like behavior to your app +- [jqwidgets-react-grid](https://www.jqwidgets.com/react/react-grid/) - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more. + +### Table + +- [ka-table](https://github.com/komarovalexander/ka-table) - [demo](https://komarovalexander.github.io/ka-table/#/overview) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc. +- [mantine-datatable](https://github.com/icflorescu/mantine-datatable) - [demo/docs](https://icflorescu.github.io/mantine-datatable/) - Lightweight table component for Mantine UI applications, with lots of features +- [material-table](https://github.com/mbrn/material-table) - [demo/docs](https://material-table.com/) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing +- [mui-datatables](https://github.com/gregnb/mui-datatables) - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows. +- [react-data-table](https://github.com/jbetancur/react-data-table-component) - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination +- [TanStack Table](https://github.com/tannerlinsley/react-table) - [demo](https://tanstack.com/table/v8/docs/examples/react/basic) - Headless UI for building powerful tables & datagrids +- [react-table-library](https://github.com/table-library/react-table-library) - [demo](https://react-table-library.com/) - React Table Library -- an almost headless table library -- for building better tables. +- [rsuite-table](https://github.com/rsuite/rsuite-table) - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. - [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps. -- [shineout](https://github.com/sheinsight/shineout) - [demo](https://shine.wiki/1.3.x/en/components/Table#heading-08-bigdata) - A comprehensive solution for complicated/big-data table. +- [DevExtreme React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/) - High-performance plugin-based data grid for Bootstrap and Material Design. +- [Smart React Grid](https://htmlelements.com/react/demos/grid/overview/) - Fast and feature-complete data grid with Material Design. +- [KendoReact Grid](https://www.telerik.com/kendo-react-ui/components/grid/) - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more. + +- [Material-React-Table](https://github.com/KevinVandy/material-react-table) - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript +- [AG Grid](https://www.ag-grid.com/) - The Best JavaScript Grid in the World ### Infinite Scroll -- [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. -- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. +- [@egjs/react-infinitegrid](https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid) - [npm](https://www.npmjs.com/package/@egjs/react-infinitegrid) - [demo](https://naver.github.io/egjs-infinitegrid/storybook/) - A module used to arrange card elements including content infinitely according to various layout types. +- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything else where the performance matters. - [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component. -- [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. +- [@af-utils/virtual](https://github.com/nowaalex/af-utils) - [demo/docs](https://af-utils.com/virtual) - Render large scrollable lists and grids. +- [react-window](https://github.com/bvaughn/react-window) - [demo](https://react-window.now.sh/) - React components for efficiently rendering large lists and tabular data +- [virtua](https://github.com/inokawa/virtua) - [demo](https://inokawa.github.io/virtua/) - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid. ### Overlay _Display overlay / modal / alert / dialog / lightbox / popup_ -- [boron](https://github.com/yuanyan/boron) - A collection of dialog animations with React.js. -- [modali](https://github.com/upmostly/modali) - A delightful modal dialog component, built from the ground up to support React Hooks. - [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. -- [react-dock](https://github.com/alexkuz/react-dock) - Resizable dockable react component. - [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React. -- [react-skylight](https://github.com/marcio/react-skylight) - A react component for modals and dialogs. +- [reoverlay](https://github.com/hiradary/reoverlay) - [demo](https://hiradary.github.io/reoverlay/) - The missing solution for managing modals. +- [sweetalert2](https://github.com/sweetalert2/sweetalert2) - [demo/docs](https://sweetalert2.github.io/) - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. +- [sweetalert2-react-content](https://github.com/sweetalert2/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_ -- [cogo-toast](https://github.com/Cogoport/cogo-toast) - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, toast messages, with promise support and inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_ - [react-notifications-component](https://github.com/teodosii/react-notifications-component) - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications. -- [react-notification-system](https://github.com/igorprado/react-notification-system) - A complete and totally customizable component for notifications in React. _(Uses refs 🙁)_ -- [react-notification](https://github.com/pburtchaell/react-notification) - Snackbar notifications for React. +- [notistack](https://iamhosseindhv.com/notistack) - [demo](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) - [docs](https://iamhosseindhv.com/notistack/api) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other +- [react-local-toast](https://github.com/OlegWock/react-local-toast) - [demo](https://react-local-toast.netlify.app/showcase/) - [docs](https://react-local-toast.netlify.app/tutorial) - show feedback linked to particular component instead of app-wide toasts. +- [react-toast](https://github.com/moharnadreza/react-toast) - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications. - 🚀 [react-toastify](https://github.com/fkhadra/react-toastify) - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. -- [react-toast-notifications](https://github.com/jossmac/react-toast-notifications) - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system. _([But no hooks yet](https://github.com/jossmac/react-toast-notifications/issues/20).)_ - [reapop](https://github.com/LouisBarranqueiro/reapop) - A React & Redux notifications system. -- [react-snackbar-alert](https://github.com/joeattardi/react-snackbar-alert) - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API. - [simple-react-notifications](https://github.com/alexpermyakov/simple-react-notifications) - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip). +- [react-hot-toast](https://github.com/timolins/react-hot-toast) - [demo](https://react-hot-toast.com/) - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default. +- [Sonner](https://sonner.emilkowal.ski/) - An opinionated toast component for React. ### Tooltip -- [rc-tooltip](https://github.com/react-component/tooltip) - React Tooltip. -- [react-portal-tooltip](https://github.com/romainberger/react-portal-tooltip) - Awesome React tooltips. - [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. ### Menu _Menus / sidebars_ -- [rc-menu](https://github.com/react-component/menu) - React Menu. +- [hamburger-react](https://github.com/luukdv/hamburger-react) - [demo/docs](https://hamburger-react.netlify.app/) - Animated hamburger menu icons for React. - [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar with effects and styles. -- [react-contextmenu](https://github.com/vkbansal/react-contextmenu) - Context Menu implemented in React. -- [react-metismenu](https://github.com/alpertuna/react-metismenu) - A ready-to-use menu component for React. - [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React. -- [react-sidebar](https://github.com/balloob/react-sidebar) - A sidebar component for React. +- [react-planet](https://github.com/innFactory/react-planet) - [demo](https://innfactory.github.io/react-planet/) - Create circular menus which looks like planets. +- [mantine-contextmenu](https://github.com/icflorescu/mantine-contextmenu) - [demo/docs](https://icflorescu.github.io/mantine-contextmenu/) - Context-menu hook/component for applications built with Mantine UI. ### Sticky _Fixed headers / scroll-up headers / sticky elements_ - [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it. -- [react-sticky](https://github.com/captivationsoftware/react-sticky) - <Sticky /> component for awesome React apps. - [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. ### Tabs @@ -102,27 +226,39 @@ _Fixed headers / scroll-up headers / sticky elements_ _Loaders / spinners / progress bars — Let the user know that something is loading_ -- [rc-progress](https://github.com/react-component/progress) - React Progress Bar. -- [react-block-ui](https://github.com/availity/react-block-ui) - Easy way to block the user from interacting with your UI. -- [react-ladda](https://github.com/jsdir/react-ladda) - React wrapper for Ladda buttons. -- [react-loader](https://github.com/TheCognizantFoundry/react-loader) - React component that displays a spinner via spin.js until your component is loaded. -- [react-loaders](https://github.com/jonjaques/react-loaders) - Lightweight wrapper around Loaders.css. -- [react-md-spinner](https://github.com/tsuyoshiwada/react-md-spinner) - Material Design spinner components for React.js. -- [react-progress-button](https://github.com/mathieudutour/react-progress-button) - Simple react.js component for an inline progress indicator. -- [react-progress-label](https://github.com/wangzuo/react-progress-label) - Progress label component. +- [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner) - Collection set of react-spinner for async operation. - [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React. -- [react-spinkit](https://github.com/KyleAMathews/react-spinkit) - A collection of loading indicators animated with CSS for React. +- [react-spinners-css](https://github.com/JoshK2/react-spinners-css) - Amazing collection of react spinners components. +- [react-spinners](https://github.com/davidhu2000/react-spinners) - A collection of loading spinner components for react. +- [react-content-loader](https://github.com/danilowoz/react-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). + +### Captcha + +- [react-simple-captcha](https://github.com/masroorejaz/react-simple-captcha) - [npm](https://www.npmjs.com/package/react-simple-captcha) - [demo](https://www.scriptse.com/blog/add-captcha-in-reactjs-application/react-simple-captcha-demo/) - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS. +- [procaptcha](https://github.com/prosopo/captcha) - [demo](https://prosopo.io/) - [docs](https://docs.prosopo.io/) - Privacy focused free CAPTCHA ### Carousel +- [@egjs/react-flicking](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/) - [npm](https://www.npmjs.com/package/@egjs/react-flicking) - [demo](https://naver.github.io/egjs-flicking/) - It's reliable, flexible and extendable carousel. +- [react-awesome-slider](https://github.com/rcaferati/react-awesome-slider) - [demo](https://fullpage.caferati.me/) - Fullpage, 3D animated, 60fps media and content slider/carousel. +- [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) - Built from scratch and not highly opinionated. - [react-id-swiper](https://github.com/kidjp85/react-id-swiper) - A library to use idangerous Swiper as a ReactJs component +- [react-instagram-zoom-slider](https://github.com/skozer/react-instagram-zoom-slider) - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram. - [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe). - [react-slick](https://github.com/akiran/react-slick) - React carousel component. +- [keen-slider](https://github.com/rcbyr/keen-slider) - [demo](https://keen-slider.io/examples/#examples) - Performant carousel/slider with native touch/swipe behavior. +- [swiper](https://github.com/nolimits4web/Swiper) - [demo](https://swiperjs.com/demos) - [docs](https://swiperjs.com/react) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. + +### Buttons + +- [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions. +- [reactive-button](https://github.com/arifszn/reactive-button) - [demo](https://arifszn.github.io/reactive-button/docs/playground) - [docs](https://arifszn.github.io/reactive-button) - A beautiful animated button component with progress indicator. ### Collapse - [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React. - [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion. +- [react-tabbordion](https://github.com/Merri/react-tabbordion) - [demo](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs. ### Chart @@ -130,31 +266,42 @@ _Display data in charts / graphs / diagrams_ - [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts. - [essential js 2 charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts & graphs for react. +- [echarts for react](https://github.com/hustcc/echarts-for-react) - Wrapper around beautiful Apache Echarts +- [jscharting-react](https://github.com/jscharting/jscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with [JSCharting](https://jscharting.com/). - [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js. -- [react-chartjs](https://github.com/reactjs/react-chartjs) - Common react charting components using chart.js. +- [react-charty](https://github.com/99ff00/react-charty) - [demo](https://99ff00.github.io/react-charty/) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming. +- [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0. - [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React. - [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS. - [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component. - [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts. -- [react-micro-bar-chart](https://github.com/KyleAMathews/react-micro-bar-chart) - React component for micro bar-charts rendered with D3. - [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. -- [react-sparkline](https://github.com/KyleAMathews/react-sparkline) - React component for rendering simple sparklines. - [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component. - [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts. -- [react-trend](https://github.com/unsplash/react-trend) - Simple, elegant spark lines. - [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3. - [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. - [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts. - [victory](https://github.com/FormidableLabs/victory) - Data viz for React. -- [reaviz](https://github.com/jask-oss/reaviz) - ReactJS Data Visualization Library based on D3.js +- [semiotic](https://semiotic.nteract.io/) - Semiotic is a data visualization framework for React. +- [DevExtreme React Chart](https://devexpress.github.io/devextreme-reactive/react/chart/) - High-performance plugin-based chart for Bootstrap and Material Design. +- [Smart React Chart](https://www.htmlelements.com/react/demos/chart/overview/) - Feature complete Charting library. +- [react-muze](https://github.com/chartshq/react-muze) - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly) +- [Flowchart React](https://github.com/joyceworks/flowchart-react) - Flowchart & Flowchart designer for React.js. +- [react-dashboard](https://github.com/flatlogic/react-dashboard) - Isomorphic Dashboards. + +### Command palette + +- [cmdk](https://cmdk.paco.me/) - Fast, composable, unstyled command menu for React. +- [kbar](https://github.com/timc1/kbar) - [demo](https://kbar.vercel.app) - Fast, portable, and extensible cmd+k interface. ### Tree _Display a tree data structure_ -- [react-treebeard](https://github.com/alexcurtis/react-treebeard) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable. +- [react-arborist](https://github.com/brimdata/react-arborist) - [demo](https://react-arborist.netlify.app/) - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search +- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - [demo](https://rct.lukasbach.com/) - [docs](https://rct.lukasbach.com/docs/getstarted) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search - [react-treeview](https://github.com/chenglou/react-treeview) - Easy, light, flexible tree view made with React. -- [react-ui-tree](https://github.com/pqx/react-ui-tree) - React tree component. +- [he-tree-react](https://github.com/phphe/he-tree-react) - [demo](https://he-tree-react.phphe.com/v1/examples) - [docs](https://he-tree-react.phphe.com/) - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized. ### UI Navigation @@ -165,26 +312,29 @@ _Ways to navigate views_ ### Custom Scrollbar +- [rc-scrollbars](https://github.com/sakhnyuk/rc-scrollbars) - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS - [react-custom-scroll](https://github.com/rommguy/react-custom-scroll) - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior. -- [react-scrollbar](https://github.com/souhe/reactScrollbar) - Scrollbar component for React. +- [react-shadow-scroll](https://github.com/andrelmlins/react-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists. ### Audio / Video - [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React. -- [react-music](https://github.com/FormidableLabs/react-music) - Make beats with React. - [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including YouTube. - [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React. - [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component. - [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library. +- [material-ui-audio-player](https://github.com/Werter12/material-ui-audio-player) - Audio player for material ui design. +- [react-vision-camera](https://github.com/xulihang/react-vision-camera) - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc. +- [react-barcode-qrcode-scanner](https://github.com/xulihang/react-barcode-qrcode-scanner) - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes. ### Map - [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map. +- [pigeon-maps](https://github.com/mariusandra/pigeon-maps) - [demo](https://pigeon-maps.js.org/) - ReactJS Maps without external dependencies. - [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API. -- [react-gmaps](https://github.com/MicheleBertoli/react-gmaps) - A Google Maps component for React.js. - [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps. - [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js and overlay API. -- [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - A React binding of mapbox-gl-js. +- [react-svg-map](https://github.com/VictorCazanave/react-svg-map) - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map. ### Time / Date / Age @@ -192,18 +342,23 @@ _Display time / date / age_ - [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs. - [timeago-react](https://github.com/hustcc/timeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'. +- [react-google-flight-datepicker](https://github.com/JSLancerTeam/react-google-flight-datepicker) - Google flight date picker implemented in ReactJS. ### Photo / Image _Display images / photos_ +- [lightGallery](https://github.com/sachinchoolur/lightGallery) - [demo](https://www.lightgalleryjs.com/) - [docs](https://www.lightgalleryjs.com/docs/react/) - Full-featured lightbox gallery component. - [react-compare-image](https://github.com/junkboy0315/react-compare-image) - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider. - [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component. -- [react-image-lightbox](https://github.com/fritz-c/react-image-lightbox) - React lightbox component. -- [react-images](https://github.com/jossmac/react-images) - A simple lightbox component for displaying an array of images. +- [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox) - [demo](https://yet-another-react-lightbox.com/examples) - [docs](https://yet-another-react-lightbox.com/documentation) - React lightbox component. - [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close. -- [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) - Responsive React Photo Gallery. +- [react-photo-album](https://github.com/igordanchenko/react-photo-album) - [demo](https://react-photo-album.com/examples) - [docs](https://react-photo-album.com/documentation) - Responsive React Photo Gallery. - [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG. +- [react-particle-image](https://github.com/malerba118/react-particle-image) - [demo](https://malerba118.github.io/react-particle-image-demo/) - Render images as interactive particles. +- [react-imgix](https://github.com/imgix/react-imgix) - Add fast, responsive images as an image, picture, or background! +- [@frameright/react-image-display-control](https://github.com/Frameright/react-image-display-control) - Define zoom regions for smart responsive images. +- [zoom-image](https://github.com/willnguyen1312/zoom-image) - [demo](https://willnguyen1312.github.io/zoom-image/examples/react.html) - [docs](https://willnguyen1312.github.io/zoom-image) - A little yet powerful framework agnostic library to zoom image on the web ### Icons @@ -211,6 +366,10 @@ _Display icons / icon set / emojis_ - [iconify-react](https://github.com/iconify/iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets. - [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports. +- [react-open-doodles](https://github.com/lunahq/react-open-doodles) - Awesome free illustrations as react components. +- [react-icomoon](https://github.com/aykutkardas/react-icomoon) - With react-icomoon you can easily use the icons you have selected or created in icomoon. +- [tabler-icons-react](https://tabler-icons-react.vercel.app) - A set of over 450 free MIT-licensed high-quality SVG icons. +- [Lucide](https://github.com/lucide-icons/lucide) - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons. ### Paginator @@ -218,6 +377,8 @@ _Display a control element to paginate_ - [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination. - [react-laravel-paginex](https://github.com/lionix-team/react-laravel-paginex) - Laravel Pagination with ReactJS (customizable). +- [paginated](https://github.com/makotot/paginated) - React render props & custom hook to build pagination. +- [react-steps](https://github.com/tkwant/react-steps) - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. ### Markdown Viewer @@ -225,24 +386,51 @@ _Display parsed markdow source_ - [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components. +### Canvas + +_Sketch input using Canvas or SVG_ + +- [react-konva](https://github.com/konvajs/react-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework. +- [react-sketch](https://github.com/tbolis/react-sketch) - A Sketch tool for React based applications, backed-up by FabricJS +- [react-sketch-canvas](https://github.com/vinothpandian/react-sketch-canvas) - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets +- [react-heat-map](https://github.com/uiwjs/react-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. + +### Screenshot + +- [html2canvas](https://github.com/niklasvh/html2canvas) - Take screenshots of any part of your web page using Javascript. + ### Miscellaneous -- [material-color-hash](https://github.com/BelkaLab/material-color-hash) - Hash strings to Material UI colors. -- [react-avatar](https://github.com/Sitebase/react-avatar) - Universal React avatar component makes it possible to generate avatars based on user information. +- [puck](https://github.com/measuredco/puck) - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React +- [react-advanced-news-ticker](https://github.com/ahmetcanaydemir/react-advanced-news-ticker) - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component - [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars. -- [react-color-scroll](https://github.com/JosephSmith127/react-color-scroll) - Change and blend new colors on the background as you scroll. +- [react-awesome-query-builder](https://github.com/ukrbublik/react-awesome-query-builder) - [demo](https://ukrbublik.github.io/react-awesome-query-builder/) - Visual query builder from form fields, with SQL, MongoDB and JSON export - [react-blur](https://github.com/javierbyte/react-blur) - React component for blurred backgrounds. +- [react-demo-tab](https://github.com/mkosir/react-demo-tab) - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components. - [react-facebook](https://github.com/CherryProjects/react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. +- [fastcomments-react](https://github.com/fastcomments/fastcomments-react) - [demo]() - FastComments component for embedding a live comment thread on a page or SPA. +- [react-pdf-viewer](https://github.com/phuoc-ng/react-pdf-viewer) - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document. +- [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot) - [demo](https://github.com/anishagg17/PIzzaBuilder) - A simple chatbot component to create conversation chats. - [react-file-reader-input](https://github.com/ngokevin/react-file-reader-input) - File input component for control for file reading styling and abstraction. - [react-filter-control](https://github.com/komarovalexander/react-filter-control) - The React filterbuilder component for building the filter criteria in the UI. +- [react-headings](https://github.com/alexnault/react-headings) - Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. - [react-joyride](https://github.com/gilbarbara/react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -- [react-json-tree](https://github.com/alexkuz/react-json-tree) - React JSON Viewer Component, Extracted from redux-devtools. +- [react-mouse-select](https://github.com/andreizanik/react-mouse-select) - [Demo](https://andreizanik.github.io/react-mouse-select/) A component that allows selecting DOM elements by moving the mouse - [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - Resizable and movable component for React. - [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - Resizable component for React. #reactjs. +- [react-searchbox-awesome](https://github.com/axmz/react-searchbox-awesome) - [demo](https://axmz.github.io/react-searchbox-awesome-page/) - Minimalistic searchbox. - [react-split-pane](https://github.com/tomkp/react-split-pane) - React split-pane component. -- [react-svg-buttons](https://github.com/plouc/react-svg-buttons) - Configurable animated SVG buttons for react. - [react-swipe-to-delete-ios](https://github.com/arnaudambro/react-swipe-to-delete-ios) - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. +- [react-swipeable-list](https://github.com/marekrozmus/react-swipeable-list) - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items. - [typography](https://github.com/KyleAMathews/typography.js) - A powerful toolkit for building websites with beautiful typography. +- [react-pulse-text](https://github.com/Kelsier90/React-Pulse-Text) - [demo/docs](https://kelsier90.github.io/React-Pulse-Text/) - Allows you to animate the text of any property of another component. +- [captcha-image](https://github.com/tpkahlon/captcha-image) - Allows you to generate a random captcha image with options. +- [react-pdf](https://github.com/wojtekmaj/react-pdf) - Display PDFs in your React app as easily as if they were images. +- [react-customizable-chat-bot](https://github.com/chithakumar13/react-chat-bot) - [Demo](https://chithakumar13.github.io/bot-example) - Build your own chatbot matching your brand needs in minutes. +- [@restpace/schema-form](https://github.com/restspace/schema-form) - [Demo](https://restspace.io/react/schema-form/demo) - Easily build complex forms automatically from a JSON Schema. +- [react-darkreader](https://github.com/Turkyden/react-darkreader) - A React Hook for adding a dark / night mode to your site inspired by darkreader. +- [react-apple-signin-auth](https://github.com/A-Tokyo/react-apple-signin-auth) - Apple signin for React using the official Apple JS SDK. +- [react-mrz-scanner](https://github.com/tony-xlh/react-mrz-scanner) - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer. ### Form Components @@ -252,61 +440,66 @@ _Let the user enter data_ _Date picker / time picker / datetime picker / date range picker_ -- [input-moment](https://github.com/wangzuo/input-moment) - React datetime picker powered by momentjs. -- [rc-calendar](https://github.com/react-component/calendar) - React Calendar. +- [date-range-picker](https://github.com/almogtavor/date-range-picker) - [demo](https://almogtavor.github.io/date-range-picker/) - A calendar component that supports date, range & ranges picks. - [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component. -- [react-calendar](https://github.com/freiksenet/react-calendar) - A modular toolkit to build calendar-related things in React. -- [react-date-range](https://github.com/Adphorus/react-date-range) - A React component for choosing dates and date ranges. - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. -- [react-daterange-picker](https://github.com/onefinestay/react-daterange-picker) - A React based date range picker. -- [react-dates](https://github.com/airbnb/react-dates) - An easily internationalizable, mobile-friendly datepicker library for the web. -- [react-datetime](https://github.com/YouCanBookMe/react-datetime) - A lightweight but complete datetime picker react component. - [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React. - [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React. - [react-simple-timefield](https://github.com/antonfisher/react-simple-timefield) - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. -- [react-yearly-calendar](https://github.com/BelkaLab/react-yearly-calendar) - React.js Yearly Calendar Component. -- [r-date-picker](https://github.com/KELEN/r-date-picker) - React.js high customize date picker component, easy style it. +- [react-timezone-select](https://github.com/ndom91/react-timezone-select) - [demo](https://ndom91.github.io/react-timezone-select/) - Dynamic, succinct timezone select. Based on `react-select`. +- [DevExtreme React Scheduler](https://devexpress.github.io/devextreme-reactive/react/scheduler/) - High-performance plugin-based scheduler/calendar for Material Design. +- [jQWidgets Scheduler](https://www.jqwidgets.com/react/react-scheduler/) - Feature complete Scheduling library. +- [react-calendar](https://github.com/wojtekmaj/react-calendar) - Ultimate calendar for your React app. +- [react-date-picker](https://github.com/wojtekmaj/react-date-picker) - A date picker for your React app. +- [schedule-x](https://github.com/schedule-x/schedule-x) - Material design event calendar and date picker components. Demo site: https://schedule-x.dev/ + +#### Emoji picker + +- [interweave-emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker) - A React based emoji picker powered by Interweave and Emojibase. #### Input Types _Masked inputs, specialized inputs; email / telephone number / credit card / etc._ - [react-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms. -- [react-input-mask](https://github.com/sanniassin/react-input-mask) - Yet another react component for input masking. -- [react-maskedinput](https://github.com/insin/react-maskedinput) - Masked <input/> React component. -- [react-text-mask](https://github.com/msafi/text-mask) - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny. -- [react-numpad](https://github.com/gpietro/react-numpad) - A numpad for number, date and time, built with and for React. It's written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form. +- [react-payment-inputs](https://github.com/medipass/react-payment-inputs) - [demo](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--basic-no-styles) - A zero-dependency container to help with payment card input fields. +- [react-input-mask](https://github.com/sanniassin/react-input-mask) - [demo](http://sanniassin.github.io/react-input-mask/demo.html) - Yet another react component for input masking. +- [@lunasec/react-sdk](https://github.com/lunasec-io/lunasec) - [docs](https://www.lunasec.io/docs/) - Secure, hardened form components that encrypt/tokenize all data automatically. +- [react-numpad](https://github.com/gpietro/react-numpad) - [demo](https://gpietro.github.io/react-numpad-demo/) - Extensible number pad control for numbers, dates and times. +- [react-multi-email](https://github.com/axisj/react-multi-email) - [demo](https://react-multi-email.vercel.app/) - Format multiple emails as the user types. #### Autocomplete _Autosuggest / autocomplete / typeahead_ - [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component. -- [react-typeahead-component](https://github.com/ezequiel/react-typeahead-component) - Typeahead, written using the React.js library. - [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer. #### Select - [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button. -- [react-select-box](https://github.com/instructure-react/react-select-box) - An accessible select box component for React. +- [react-functional-select](https://github.com/based-ghost/react-functional-select) - [demo](https://based-ghost.github.io/react-functional-select/) - Micro-sized & micro-optimized select component for React.js. +- [react-mobile-picker](https://github.com/adcentury/react-mobile-picker) - [demo](https://react-mobile-picker.vercel.app/) - An iOS like select box component. - [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS. -- [react-selectize](https://github.com/furqanZafar/react-selectize) - A Stateless & Flexible Select component for React inspired by Selectize. +- [react-column-select](https://github.com/chr-ge/react-column-select) - A column select component built for react. +- [react-select-search](https://github.com/tbleckert/react-select-search) - [demo](https://react-select-search.com/) - A lightweight select component for React #### Color Picker - [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React. -- [react-color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome & more. +- [react-color](https://github.com/uiwjs/react-color) - Is a tiny color picker widget component for React apps. +- [react-colorful](https://github.com/omgovich/react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component. - [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker. #### Toggle +- [@anatoliygatt/heart-switch](https://github.com/anatoliygatt/heart-switch) - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component. - [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch component. - [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox. -- [react-triple-toggle](https://github.com/geobde/react-triple-toggle) - ⚛️ React multi toggle component. +- [ui-switch](https://github.com/yairEO/ui-switch) - The most complete _Toggle_ component #### Slider -- [rc-slider](https://github.com/react-component/slider) - React Slider. - [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React. #### Radio Button @@ -319,190 +512,230 @@ _Let the user select something (e.g. a tag) while typing_ - [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React. - [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea. +- [rich-textarea](https://github.com/inokawa/rich-textarea) - A textarea to colorize, highlight, decorate texts and offer autocomplete. #### Tag Input _Let the user add multiple tags in a single input_ -- [@pathofdev/react-tag-input](https://github.com/pathofdev/react-tag-input) - [demo & docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags - [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects. - [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags. - [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React. +- [tagify](https://github.com/yairEO/tagify) - [demo & docs](https://yaireo.github.io/tagify/) - Lightweight, efficient Tags input component. #### Autosize Input / Textarea - [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React. +- [react-autowidth-input](https://github.com/kierien/react-autowidth-input) - Highly configurable & extensible automatically sized input field built with hooks. - [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - <textarea /> component for React which grows with content. #### Star Rating +- [react-rating](https://github.com/smastrom/react-rating) - [demo](https://react-rating.onrender.com/) - Zero-dependency, highly customizable rating component. - [react-awesome-stars-rating](https://github.com/fedoryakubovich/react-awesome-stars-rating) - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility. - [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars. -- [react-star-rating](https://github.com/cameronroe/react-star-rating) - A simple star rating component built with React. #### Drag and Drop - [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React -- [react-dnd-touch-backend](https://github.com/yahoo/react-dnd-touch-backend) - Touch Backend for react-dnd. - [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React. +- [react-drag-sizing](https://github.com/fritx/react-drag-sizing) - "Drag to resize" (sizing) as React Component. - [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component. - [react-dragula](https://github.com/bevacqua/react-dragula) - Drag and drop so simple it hurts. -- [react-droparea](https://github.com/avocode/react-droparea) - Drag and Drop library for React. - [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js. +- [react-movable](https://github.com/tajo/react-movable) - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables. - [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React. +- [neodrag](https://github.com/PuruVJ/neodrag) - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same. #### Sortable List _Let the user define an order on a list_ - [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - Sort any children with touch support and IE8 compatibility. -- [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) - Higher-order components to turn any list into an animated, touch-friendly, sortable list. -- [react-sortable](https://github.com/danielstocks/react-sortable) - A sortable list component built with React. -- [sortablejs](https://github.com/RubaXa/Sortable) - A JavaScript library for reorderable drag-and-drop lists. +- [sortablejs](https://github.com/SortableJS/Sortable) - Lists reorderable by drag-and-drop, within and among lists. #### Rich Text Editor - [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI. +- [ckeditor4-react](https://github.com/ckeditor/ckeditor4-react) - An official CKEditor 4 rich text editor wrapper. +- [ckeditor5-react](https://github.com/ckeditor/ckeditor5-react) - An official CKEditor 5 rich text editor wrapper. - [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors. +- [edtr-io](https://github.com/edtr-io/edtr-io) - [demo](https://edtr.io/) - [docs](https://edtr.io/docs/getting-started) - WYSIWYG in-line web editor with plugins. - [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js. -- [react-ace](https://github.com/securingsincity/react-ace) - React Ace Component. -- [react-codemirror](https://github.com/JedWatson/react-codemirror) - Codemirror Component for React.js. +- [react-ace](https://github.com/securingsincity/react-ace) - Ace (Advanced Code Editor) wraper. +- [react-codemirror](https://github.com/uiwjs/react-codemirror) - [demo](https://uiwjs.github.io/react-codemirror/) - CodeMirror component for React. - [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents. -- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - A Wysiwyg editor build on top of ReactJS and DraftJS. -- [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - React wrapper for medium-editor. -- [react-quill](https://github.com/zenoamaro/react-quill) - A Quill component for React. -- [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - React wrapper for Trumbowyg. -- [ritzy](https://github.com/ritzyed/ritzy) - Collaborative web-based rich text editor. +- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). +- [react-editor](https://github.com/fritx/react-editor) - Simple richtext editor that can insert images and HTML. +- [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - medium-editor wrapper. +- [react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor) - Monaco Editor component for React. +- [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor) - Simple no-frills code editor with syntax highlighting +- [react-quill](https://github.com/zenoamaro/react-quill) - Quill wrapper. +- [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper. +- [remirror](https://github.com/remirror/remirror) - [demo](https://remirror.io/playground) - [docs](https://remirror.io/docs) - ProseMirror toolkit for React. +- [slate](https://github.com/ianstormtaylor/slate) - [demo](http://slatejs.org/) - [docs](https://docs.slatejs.org/) - A completely customizable framework for building rich text editors. +- [smartblock](https://github.com/appleple/smartblock) - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. +- [tiptap](https://github.com/ueberdosis/tiptap) - [demo](https://tiptap.dev/) - [docs](https://tiptap.dev/introduction) - The headless editor framework for web artisans. #### Markdown Editor +- [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor) - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor). - [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux. -- [react-md-editor](https://github.com/JedWatson/react-md-editor) - React.js Markdown Editor Component. +- [react-md-editor](https://github.com/uiwjs/react-md-editor) - A simple markdown editor with preview, implemented with React.js and TypeScript. #### Image Editing _Image manipulation_ -- [react-avatar-cropper](https://github.com/DropsOfSerenity/react-avatar-cropper) - Aiming to be a complete solution for avatar cropping in react. - [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - Facebook-like, avatar / profile picture component. +- [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Generate fun kaleidoscope for user avatars. +- [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly. - [react-image-crop](https://github.com/DominicTobias/react-image-crop) - A responsive image cropping tool for React. -- [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - React image crop. +- [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - Image cropper. +- [react-advanced-cropper](https://github.com/advanced-cropper/react-advanced-cropper) - A react cropper library to create the cropper exactly suited for your website design. +- [react-mobile-cropper](https://github.com/advanced-cropper/react-mobile-cropper) - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on `react-advanced-cropper`. #### Form Component Collections -- [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material-UI form components. +- [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material UI form components. - [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form. - [react-input-enhancements](https://github.com/alexkuz/react-input-enhancements) - Set of enhancements for input control. -- [react-widgets](https://github.com/jquense/react-widgets) - An à la carte set of polished, extensible, and accessible inputs built for React. +- [react-widgets](https://github.com/jquense/react-widgets) - An à la carte set of polished, extensible, and accessible inputs. #### Miscellaneous -- [react-designer](https://github.com/fatiherikli/react-designer) - Easy to configure, lightweight, editable vector graphics in your react components. -- [react-images-uploader](https://github.com/aleksei0807/react-images-uploader) - React.js component for uploading images to the server. +- [@anatoliygatt/numeric-stepper](https://github.com/anatoliygatt/numeric-stepper) - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-numeric-stepper-mllfyl) - A fully themeable and accessible numeric stepper component. +- [interweave](https://github.com/milesj/interweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more. +- [react-designer](https://github.com/react-designer/react-designer) - Easy to configure, lightweight, editable vector graphics in your react components. - [react-upload-gallery](https://github.com/TPMinan/react-upload-gallery) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize. #### Syntax Highlight -- [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) - Syntax highlighting component for react with prismjs or highlightjs ast using inline styles. +- [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles. ## UI Layout +**[`Back to top ⬆️`](#table-of-contents)** + _Components to layout the app's UI_ - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library. -- [flexbox-react](https://github.com/nachoaIvarez/flexbox-react) Unopinionated, standard compliant flexbox components. -- [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen javascript Layout manager. -- [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system for React, powered by styled-components. -- [m-react-splitters](https://github.com/martinnov92/React-Splitters) - React splitter component, written in TypeScript. -- [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) - A set of React components implementing flexboxgrid with the power of CSS Modules. +- [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen JavaScript Layout manager. +- [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system, powered by styled-components. +- [m-react-splitters](https://github.com/martinnov92/React-Splitters) - Splitter component, written in TypeScript. +- [muuri-react](https://github.com/Paol-imi/muuri-react) - [demo](https://1czo5.csb.app/) - [docs](https://paol-imi.github.io/muuri-react) - Responsive, sortable, filterable and draggable grid layouts. - [react-grid-layout](https://github.com/STRML/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React. -- [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - A React.js component for using @desandro's Masonry. +- [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - Wrapper for @desandro's Masonry. - [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications. - [react-spaces](https://github.com/aeagle/react-spaces) - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components. -- [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid) - Pinterest like layout components for React.js. -- [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component for React. +- [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component. +- [react-colrow](https://github.com/phphe/react-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow. +- [react-schematic](https://github.com/umeshmk/react-schematic) - [demo](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration ## UI Animation +**[`Back to top ⬆️`](#table-of-contents)** + _Animate transitions_ -- [animakit-elastic](https://github.com/animakit/animakit-elastic) - AnimakitElastic - React component for flexible resizing of the blocks. -- [animakit-expander](https://github.com/animakit/animakit-expander) - AnimakitExpander - React component for the expanding and collapsing of the blocks. -- [animakit-rotator](https://github.com/animakit/animakit-rotator) - AnimakitRotator - React component for the 3D rotation of the blocks. -- [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data in react. -- [rc-animate](https://github.com/react-component/animate) - Anim react element easily. -- [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library for React. +- [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data. +- [react-animatable](https://github.com/inokawa/react-animatable) - An animation library using Web Animations API. +- [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library. - [react-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. - [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together. -- [react-magic-move](https://github.com/ryanflorence/react-magic-move) - MagicMove for React.js. -- [react-motion-ui-pack](https://github.com/souporserious/react-motion-ui-pack) - Wrapper component around React Motion for easier UI transitions. +- [react-tsparticles](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md) - A lightweight component to easily create interactive particles animations - [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems. -- [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - A React.js wrapper component to animate the line stroke in SVGs. +- [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs. - [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion. +- [react-spring](https://github.com/react-spring/react-spring) - A spring physics based animation library. +- [react-ts-typewriter](https://github.com/gerardmarquinarubio/ReactTypewriter) - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. +- [framer-motion](https://github.com/framer/motion) - An animation and gesture library. - [react-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react. - [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations. -- [react-transitive-number](https://github.com/Lapple/react-transitive-number) - React component to apply transition effect to numeric strings, a la old Groupon timers. -- [react-tween-state](https://github.com/chenglou/react-tween-state) - React animation. -- [react-tween](https://github.com/clari/react-tween) - Tween animation for React components. +- [react-transitive-number](https://github.com/Lapple/react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers. - [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -. -- [react.animate](https://github.com/pleasetrythisathome/react.animate) - State animation plugin for react.js. -- [velocity-react](https://github.com/twitter-fabric/velocity-react) - React components for Velocity.js. -- [react-scroll-rotate](https://github.com/giladk/react-scroll-rotate) - [demo](https://giladk.github.io/react-scroll-rotate/) - Very simple scroll based element rotation +- [auto-size-transition](https://github.com/DualWield/auto-size-transition) - A component that scale dynamically according to the internal children size +- [react-particles-bg](https://github.com/lindelof/particles-bg) - Particles backgrounds. +- [gooey-react](https://github.com/luukdv/gooey-react) - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. +- [react-voodoo](https://github.com/react-voodoo/react-voodoo) - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc ### Parallax -- [react-parallax-component](https://github.com/keske/react-parallax-component) - Easiest way to add scroll parallax effect on the component. +- [simple-parallax-js](https://github.com/geosigno/simpleParallax.js) - [demo](https://simpleparallax.com) - The easiest way to get a parallax effect with React and JavaScript on images - [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components. ## UI Frameworks +**[`Back to top ⬆️`](#table-of-contents)** + ### Responsive _Set of components + responsive layout system_ -- 🚀 [ant-design](https://github.com/ant-design/ant-design) - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language. -- [atlaskit](https://atlaskit.atlassian.com/packages) - Atlassian's official UI library. _(Please... no more Jira though 😉)_ -- [belle](https://github.com/nikgraf/belle) - Configurable React Components with great UX. -- [blueprint](https://github.com/palantir/blueprint) - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for the web. -- [carbon](https://github.com/carbon-design-system/carbon) - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. _(Wait, since when are IBM known for design?? 🎨)_ -- [elemental](https://github.com/elementalui/elemental) - A flexible and beautiful UI framework for React.js. +- [AgnosticUI](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! +- [ant-design](https://github.com/ant-design/ant-design) - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available. +- [atlaskit](https://atlaskit.atlassian.com/packages) - Atlassian's official UI library, with components from _badge_ to _tree table_. +- [base web](https://baseweb.design) - Base Web is a foundation for initiating, evolving, and unifying web products. +- [carbon](https://github.com/carbon-design-system/carbon) - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. +- [cdbreact](https://github.com/Devwares-Team/cdbreact) - [demo](https://www.devwares.com/product/contrast) - [docs](https://www.devwares.com/docs/contrast/react/index) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps. +- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications. +- [ChatUI](https://github.com/alibaba/ChatUI) - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI +- [CoreUI for React](https://github.com/coreui/coreui-react) - [demo/docs](https://coreui.io/react) - Open Source UI components library. +- [evergreen](https://github.com/segmentio/evergreen) - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment. +- [fluentui](https://github.com/microsoft/fluentui) - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. +- [geist-ui](https://github.com/geist-org/geist-ui) - Modern and minimalist React UI library. +- [gestalt](https://github.com/pinterest/gestalt) - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language. - [grommet](https://github.com/grommet/grommet) - The most advanced UX framework for enterprise applications. -- [gestalt](https://github.com/pinterest/gestalt) - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language. _(Nice... but surprisingly not as well-designed as I would have thought from Pinterest. 😬)_ -- [pivotal-ui-react](https://github.com/pivotal-cf/pivotal-ui) - React components based on a custom version of the Bootstrap library. -- [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) - React components for building Microsoft web experiences. _(🤔 But I'm not sure I want a "MSFT experience?")_ -- [rctui](https://github.com/Lobos/react-ui) - A collection of components for React. -- [react-foundation-apps](https://github.com/akiran/react-foundation-apps) - Foundation Apps components built with React. -- [react-foundation](https://github.com/nordsoftware/react-foundation) - Foundation as React components. -- [react-uikit-components](https://github.com/otissv/react-uikit-components) - React UIkit Components for the UIKit CSS framework. -- [rebass](https://github.com/jxnblk/rebass) - Configurable React Stateless Functional UI Components. +- [Mantine](https://github.com/mantinedev/mantine) - [demo/docs](https://mantine.dev/) - A fully featured library with 100+ hooks and components with native dark theme support +- [orbit](https://github.com/kiwicom/orbit) - Components for building travel oriented projects. +- [flowbite-react](https://github.com/themesberg/flowbite-react) - Open-source UI component library based on React, Tailwind CSS, and Flowbite. +- [primereact](https://github.com/primefaces/primereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes. +- [radix-ui](https://www.radix-ui.com/) - Unstyled, accessible components for building high‑quality design systems and web apps. +- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React. +- [react-foundation](https://github.com/digiaonline/react-foundation) - Foundation as React components. +- [reakit](https://github.com/ariakit/ariakit) - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps - [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch. - [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration. +- [semi-design](https://github.com/DouyinFE/semi-design) - [demo/docs](https://semi.design/) - A modern, comprehensive, flexible design system. +- [shadcn/ui](https://github.com/shadcn-ui/ui) - [demo](https://ui.shadcn.com/examples/mail) - [docs](https://ui.shadcn.com/docs) - Beautifully designed components that you can copy and paste into your apps. +- [shineout](https://github.com/sheinsight/shineout) - [demo](https://shine.wiki/1.4.x/en/components/GetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc. #### Material Design -- 🚀 [material-ui](https://github.com/mui-org/material-ui) - React Components that Implement Google's Material Design. (But possibly [bloated](https://hackernoon.com/how-i-made-my-react-app-4-times-faster-7b929479cac4).) -- [OnsenUI](https://github.com/OnsenUI/OnsenUI/) - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app development framework. +- 🚀 [Material UI](https://github.com/mui/material-ui) - Full suite of components. Build your own design system, or start with Material Design. + - [Autocomplete](https://mui.com/material-ui/react-autocomplete/) - Accessible autocomplete, combobox, multiselect + - [Material Icons](https://mui.com/material-ui/material-icons/) - 1,000+ SVG material icons. + - [Modal](https://mui.com/material-ui/react-modal/) - Accessible modal dialog component. + - [Slider](https://mui.com/material-ui/react-slider/) - Accessible slider component. + - [Table](https://mui.com/material-ui/react-table/) - table with sorting, selecting, pagination, virtualized. + - [Tree View](https://mui.com/material-ui/react-tree-view/) - Accessible tree view component for React. - [react-essence](https://github.com/Evo-Forge/Essence) - Essence - The Essential Material Design Framework. - [react-materialize](https://github.com/react-materialize/react-materialize) - Material design for react, powered by materializecss. -- [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design. +- [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design. +- [mdbootstrap](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) - React Bootstrap with Material Design ### Mobile -- [antd-mobile](https://github.com/ant-design/ant-design-mobile) - A configurable Mobile UI. -- [reactionic](https://github.com/reactionic/reactionic) - React Ionic. -- [touchstonejs](https://github.com/touchstonejs/touchstonejs) - Mobile App Framework powered by React. +- [antd-mobile](https://github.com/ant-design/ant-design-mobile) - Configurable Mobile UI from China. +- [Ionic React](https://ionicframework.com/blog/announcing-ionic-react/) - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base. +- [OnsenUI](https://github.com/OnsenUI/OnsenUI/) - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components. ### Component Collections +- [blueprint](https://github.com/palantir/blueprint) - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications. - [dataminr-react-components](https://github.com/dataminr/react-components) - Collection of reusable React Components and utility functions. -- [shards-react](https://github.com/DesignRevision/shards-react) - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰 +- [shards-react](https://github.com/DesignRevision/shards-react) - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium. - [aframe-react](https://github.com/ngokevin/aframe-react) - Build virtual reality experiences with A-Frame and React. - [react-admin](https://github.com/marmelab/react-admin) - Build admin user experiences on top of REST and GraphQL services. -- [react-desktop](https://github.com/gabrielbull/react-desktop) - React UI Components for macOS Sierra and Windows 10. -- [react-stack-cards](https://github.com/yoloten/react-stack-cards) - Collection of stack card effects for galleries and preview grids. +- [refine](https://github.com/pankod/refine) - [demo](https://example.refine.dev) - [docs](https://refine.dev/docs) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit. +- [matrix-card](https://github.com/MehmetKaplan/matrix-card) - [demo](https://mehmetkaplan.github.io/matrix-card/) - Simplest possible component to generate matrix rain style cards. +- [rsuite](https://github.com/rsuite/rsuite) - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products". +- [lens-ui](https://github.com/luciancaetano/lens-ui) - [docs](https://github.com/luciancaetano/lens-ui/blob/main/docs/introduction.md) - A Suit of components focused on simplicity. ## UI Utilities +**[`Back to top ⬆️`](#table-of-contents)** + ### Reporter _Report computed styles_ @@ -511,6 +744,7 @@ _Report computed styles_ _Report when a component becomes visible/hidden_ +- [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) - React implementation of the Intersection Observer API. - [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) - Sensor component. - [react-waypoint](https://github.com/brigade/react-waypoint) - A React component to execute a function whenever you scroll to an element. @@ -521,7 +755,6 @@ _Determine and report measurements of an element_ - [react-component-queries](https://github.com/ctrlplusb/react-component-queries) - Provide props to your Components based on their Width and/or Height. - [react-container-dimensions](https://github.com/okonet/react-container-dimensions) - Wrapper component that detects element resize. - [react-dimensions](https://github.com/digidem/react-dimensions) - React higher-order component to get dimensions of container. -- [react-height-reporter](https://github.com/berrtech/react-height-reporter) - React component-wrapper detecting height changes of it's children. - [react-height](https://github.com/nkbt/react-height) - Component-wrapper to determine and report children elements height. - [react-measure](https://github.com/souporserious/react-measure) - Compute measurements of a React component. - [react-sizeme](https://github.com/ctrlplusb/react-sizeme) - Make your React Components aware of their width and height. @@ -536,6 +769,8 @@ _Turn user input into actions_ - [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events. - [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components. - [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place. +- [useKeyCapture](https://github.com/pranesh239/use-key-capture) - A custom hook to ease the key-press listeners of a target/global. +- [react-keyboard-navigator](https://github.com/zheeeng/react-keyboard-navigator) - A suite of React components and hook for selecting sibling components through the keyboard. #### Scroll Events @@ -547,21 +782,19 @@ _Turn user input into actions_ #### Mouse Events -- [react-aim](https://github.com/gabrielbull/react-aim) - Determine the cursor aim for triggering mouse events. +- [react-hook-mighty-mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. ### Meta Tags _Set meta tags, , children of <head>_ -- [react-document-meta](https://github.com/kodyl/react-document-meta) - HTML meta tags for React-based apps. -- [react-document-title](https://github.com/gaearon/react-document-title) - Declarative, nested, stateful, isomorphic document.title for React. +- [react-helmet-async](https://github.com/staylor/react-helmet-async#readme) - Thread-safe Helmet for React 16+ and friends - [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React. ### Portal _Render an element at an arbitrary DOM node_ -- [react-gateway](https://github.com/cloudflare/react-gateway) - Render React DOM into a new context (aka "Portal"). - [react-layer-stack](https://github.com/fckt/react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React. - [react-portal](https://github.com/tajo/react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body. @@ -569,110 +802,92 @@ _Render an element at an arbitrary DOM node_ _A/B tests, experiments, ..._ -- [react-ab](https://github.com/olahol/react-ab) - Simple declarative and universal A/B testing component for React. - [react-experiments](https://github.com/HubSpot/react-experiments) - React components for implementing UI experiments. ## Code Design +**[`Back to top ⬆️`](#table-of-contents)** + _Libraries that help with code design_ ### Data Store _Data flow / data management / data stores / components state / data flow_ -- [alt](https://github.com/goatslacker/alt) - Isomorphic flux implementation. - [baobab-react](https://github.com/Yomguithereal/baobab-react) - React integration for Baobab. - [cerebral](https://github.com/cerebral/cerebral) - A state controller with its own debugger. -- [fluorine-lib](https://github.com/philpl/fluorine) - Reactive state and side effect management for React using a single stream of actions. +- [effector-react](https://github.com/effector/effector) - React bindings for effector, an effective multi-store state manager. +- [fireproof](https://github.com/fireproof-storage/fireproof) - [demo](https://fireproof.storage/try-free/) - [docs](https://use-fireproof.com/docs/welcome) Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend +- [RxDB](https://rxdb.info/) - [demo](https://github.com/pubkey/rxdb/tree/master/examples/react) - [docs](https://rxdb.info/quickstart.html) A fast, local first, reactive Database for JavaScript Applications - [fluxible](https://github.com/yahoo/fluxible) - A pluggable container for universal flux applications. -- [fluxxor](https://github.com/BinaryMuse/fluxxor) - Flux architecture tools for React. - [kea](https://github.com/mariusandra/kea) - High level architecture for React apps. -- [mobx-react](https://github.com/mobxjs/mobx-react) - React bindings for MobX. Create fully reactive components. -- [react-controllables](https://github.com/matthewwithanm/react-controllables) - Easily create controllable components. - [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application. -- [react-redux-provide](https://github.com/loggur/react-redux-provide) - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. - [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux. -- [recompose](https://github.com/acdlite/recompose) - A React utility belt for function components and higher-order components. - [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification. -- [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) - Store enhancer for which allows batching subscribe notifications. -- [redux-ui](https://github.com/tonyhb/redux-ui) - Easy UI state management for react redux. - [redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps. -- [reflux](https://github.com/reflux/refluxjs) - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux. - [reselect](https://github.com/reactjs/reselect) - Selector library for Redux. -- [shasta](https://github.com/shastajs/shasta) - Dead simple + opinionated toolkit for building redux/react applications. +- [resourcerer](https://github.com/SiftScience/resourcerer) - Declarative data-fetching framework for REST APIs +- [synergies](https://github.com/lukasbach/synergies) - [docs](https://synergies.js.org) A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces. +- [zustand](https://zustand.surge.sh/) - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api. +- [teaful](https://github.com/teafuljs/teaful) - Tiny, easy and powerful React state management ### Form Logic -- [formcat](https://github.com/guilouro/formcat) - A simple and easy way to control forms in React using the React Context API +- [data-driven-forms](https://github.com/data-driven-forms/react-forms) - A declarative way for building forms with all the functionality. - [formik](https://github.com/jaredpalmer/formik) - Build forms without tears and supports Validation in ease. -- [formsy-react](https://github.com/christianalfoni/formsy-react) - A form input builder and validator for React JS. -- [newforms](https://github.com/insin/newforms) - INACTIVE] Isomorphic form-handling for React. -- [plexus-form](https://github.com/AppliedMathematicsANU/plexus-form) - A dynamic form component for react using JSON-Schema. +- [formsy-react](https://github.com/formsy/formsy-react/) - A form input builder and validator for React JS. +- [Phormal](https://github.com/phormal/phormal) - [Docs & Demos](https://phormal.dev/getting-started/react) - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages. +- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React hooks for form validation without the hassle. - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema. -- [react-redux-form](https://github.com/davidkpiano/react-redux-form) - Create forms easily in React with Redux. -- [react-validation-mixin](https://github.com/jurassix/react-validation-mixin) - Simple validation mixin (HoC) for React. -- [redux-form](https://github.com/erikras/redux-form) - A Higher Order Component using react-redux to keep form state in a Redux store. +- [react-client-validation](https://github.com/0529bill/react-client-validation) - Simple and super lightweight validation for React. +- [react-final-form](https://github.com/final-form/react-final-form) - Subscription-based form state management - [react-formawesome](https://github.com/MAKARD/react-formawesome) - Complex library for creating awesome forms. - [surveyjs](https://github.com/surveyjs/survey-library) - The advanced Survey and Form library -- [tcomb-form](https://github.com/gcanti/tcomb-form) - Forms library for react. -- [winterfell](https://github.com/andrewhathaway/Winterfell) - Generate complex, validated and extendable JSON-based forms in React. +- [Formily](https://github.com/alibaba/formily) - High performance, extensible, and Typescript friendly +- [hook-form-react](https://github.com/luoanb/hook-form-react) - [docs](https://luoanb.github.io/hook-form-react) - A lightweight, dependency-free solution React hooks for form validation. ### Router -- [cerebral-module-router](https://github.com/cerebral/cerebral-module-router) - An opinionated URL change handler for Cerebral. -- [monorouter](https://github.com/matthewwithanm/monorouter) - An isomorphic JS router. -- [react-breadcrumbs](https://github.com/svenanders/react-breadcrumbs) - Automatic breadcrumbs for React-Router. - [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React. -- [react-router-redux](https://github.com/reactjs/react-router-redux) - Ruthlessly simple bindings to keep react-router and redux in sync. - [react-router-scroll](https://github.com/taion/react-router-scroll) - React Router scroll management. - [react-router](https://github.com/reactjs/react-router) - A complete routing library for React. -- [redux-router](https://github.com/acdlite/redux-router) - Redux bindings for React Router – keep your router state inside your Redux store. -- [rrtr](https://github.com/taion/rrtr) - A complete routing solution for React.js. +- [redux-first-history](https://github.com/salvoravida/redux-first-history) - Redux First History - Redux history binding support react-router - @reach/router - wouter - [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps. +- [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks. +- [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management ### Props from server _Component properties asynchronously fetched over the network_ -- [react-async](https://github.com/andreypopp/react-async) - Asynchronously fetch data for React components. - [react-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components. -- [react-resolver](https://github.com/ericclemmons/react-resolver) - Async rendering & data-fetching for universal React applications. -- [react-router-relay](https://github.com/relay-tools/react-router-relay) - Relay integration for React Router. -- [redial](https://github.com/markdalgleish/redial) - Universal data fetching and route lifecycle management for React etc. -- [redux-async-connect](https://github.com/Rezonans/redux-async-connect) - Request async data, store in redux state, and connect to your component. - [redux-connect](https://github.com/makeomatic/redux-connect) - Provides decorator for resolving async props in react-router. +- [axios-react](https://github.com/soroushchehresa/axios-react) - HTTP client component for React. ### Communication with server -- [adrenaline](https://github.com/gyzerok/adrenaline) - Simple Relay alternative. - [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework. -- [cerebral-module-http](https://github.com/cerebral/cerebral-module-http) - HTTP module for Cerebral. -- [react-apollo](https://github.com/apollostack/react-apollo) - React data container for the Apollo Client. - [react-relay](https://github.com/facebook/relay) - Relay is a JavaScript framework for building data-driven React applications. -- [react-transmit](https://github.com/RickWong/react-transmit) - Relay-inspired library based on Promises instead of GraphQL. +- [query](https://github.com/TanStack/query) - [docs](https://tanstack.com/query/v4) Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. ### CSS / Style +- [aesthetic](https://github.com/milesj/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](https://github.com/Khan/aphrodite) - It's inline styles, but they work!. -- [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. - [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects. -- [postcss-js](https://github.com/postcss/postcss-js) - PostCSS for React Inline Styles, Free Style and other CSS-in-JS. -- [radium](https://github.com/FormidableLabs/radium) - A set of tools to manage inline styles on React elements. - [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component. -- [react-css-modules](https://github.com/gajus/react-css-modules) - Seamless mapping of class names to CSS modules inside of React components. - [react-responsive](https://github.com/contra/react-responsive) - Media queries in react for responsive design. +- [reactponsive](https://github.com/jmlweb/reactponsive) - Responsive components and hooks. - [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age. +- [stitches](https://github.com/stitchesjs/stitches) - CSS-in-JS with near-zero runtime, SSR, multi-variant support. ### HTML Template -- [hyperx](https://github.com/substack/hyperx) - Tagged template string virtual dom builder. - [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements) - Neater If and For for React JSX. -- [react-templates](https://github.com/wix/react-templates) - Light weight templates for react. ### Isomorphic Apps - [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views. -- [isomorphic-relay](https://github.com/denvned/isomorphic-relay) - Adds server side rendering support to React Relay. - [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader) - Isomorphic CSS style loader for Webpack. - [react-server](https://github.com/redfin/react-server) - React framework with server render for blazing fast page load. - [rill](https://github.com/rill-js/rill) - Universal web application framework. @@ -683,36 +898,37 @@ _Component properties asynchronously fetched over the network_ _Scaffold / starter kit / Yeoman generator / stack ensemble / seed_ - [create-react-app](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration. +- [crisp-react](https://github.com/winwiz1/crisp-react) - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance. +- [cra-template-redux-auth-starter](https://github.com/Nilanth/cra-template-redux-auth-starter) - A Redux auth starter boilerplate for CRA. - [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Live editing development on desktop app. -- [essential-react](https://github.com/pheuter/essential-react) - A minimal skeleton for building testable React apps using Babel. -- [generator-flux-on-rails](https://github.com/alexfedoseev/generator-flux-on-rails) - Scaffolder of universal Flux / Redux app, backed by Rails API. -- [generator-react-webpack](https://github.com/react-webpack-generators/generator-react-webpack) - Yeoman generator for ReactJS and Webpack. +- [elegant](https://github.com/elegantframework/elegant-cli) - [docs](https://www.elegantframework.com/docs/installation) - [demo](https://www.elegantframework.com/) - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading. +- [extensive-react-boilerplate](https://github.com/brocoders/extensive-react-boilerplate) - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI. - [generator-starhackit](https://github.com/FredericHeem/starhackit) - Full-stack starter kit. -- [gluestick](https://github.com/TrueCar/gluestick) - GlueStick is a command line interface for quickly developing universal web apps. - [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps & components and npm modules. -- [react-boilerplate](https://github.com/mxstbr/react-boilerplate) - Quick packager-agnostic boilerplate for React modules using JSX. +- [nx](https://nx.dev) - Next generation build system with first class monorepo support and powerful integrations. +- [PBandJ](https://github.com/moishinetzer/pbandj) - Zero-Config Reusable Component Framework. - [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project. -- [react-isomorphic-starterkit](https://github.com/RickWong/react-isomorphic-starterkit) - Create an isomorphic React app in less than 5 minutes. -- [react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit) - Get started with React, Redux, and React-Router!. -- [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp. -- [reactuate](https://github.com/reactuate/reactuate) - React/Redux stack (not a boilerplate kit). -- [redux-cli](https://github.com/SpencerCDixon/redux-cli) - An opinionated CLI for building redux/react apps quicker. -- [relay-fullstack](https://github.com/lvarayut/relay-fullstack) - Relay Starter Kit. -- [roc](https://github.com/rocjs/roc) - Modern Application Development Ecosystem. -- [universal-redux](https://github.com/bdefore/universal-redux) - An npm package that lets you jump right into coding React and Redux. +- [rockpack](https://github.com/AlexSergey/rockpack) - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes. +- [create-react-dependency](https://github.com/andrelmlins/create-react-dependency) - Create react dependencies with no build configuration. +- [phoenix](https://github.com/Sazito/phoenix) - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support. +- [react-enterprise-starter-kit](https://github.com/anandgupta193/react-enterprise-starter-kit) - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. ### Miscellaneous - [react-inlinesvg](https://github.com/matthewwithanm/react-inlinesvg) - An SVG loader component for ReactJS. +- [react-godfather](https://github.com/kapolos/react-godfather) - A new way to write Functional Components, without Hooks. - [redux-auth-patch](https://github.com/lynndylanhurley/redux-auth) - Complete token authentication system for react + redux that supports isomorphic rendering. - [redux-search](https://github.com/treasure-data/redux-search) - Redux bindings for client-side search. - [tcomb-react](https://github.com/gcanti/tcomb-react) - Alternative syntax for PropTypes. +- [react-universal-hooks](https://github.com/salvoravida/react-universal-hooks) - :tada: support react hooks everywhere (Functional or Class Component). ## Utilities +**[`Back to top ⬆️`](#table-of-contents)** + - [qrcode.react](https://github.com/zpao/qrcode.react) - A <QRCode/> component for use with React. +- [`<qr-code>`](https://github.com/bitjson/qr-code) – A no-dependencies, customizable, animate-able, SVG-based `<qr-code>` element. - [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) - Extended utils for React.Children. -- [react-faux-dom](https://github.com/Olical/react-faux-dom) - DOM like structure that renders to React. - [react-media](https://github.com/ReactTraining/react-media) - A CSS media query component for React. - [react-middle-ellipsis](https://github.com/bluepeter/react-middle-ellipsis) - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. - [react-translate-component](https://github.com/martinandert/react-translate-component) - Multi-lingual/localized text content. @@ -721,10 +937,13 @@ _Scaffold / starter kit / Yeoman generator / stack ensemble / seed_ _Internationalization / L10n / localization / translation_ -- [react-globalize](https://github.com/globalizejs/react-globalize) - Bringing the i18n functionality of Globalize, backed by CLDR, to React. - [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem. - [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps. +- [react-localized](https://github.com/fakundo/react-localized) - Internationalization for React components based on `gettext` format. - [react-translate-maker](https://github.com/CherryProjects/react-translate-maker) - Universal internationalization (i18n) open source library for React. +- [react-intl-universal](https://github.com/alibaba/react-intl-universal) - [demo](https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html) Internationalize React apps. Not only for React.Component but also for Vanilla JS. +- [@tolgee/react](https://github.com/tolgee/tolgee-js/tree/main/packages/react) - [docs](https://tolgee.io/docs/web/using_with_react/installation) – Web-based localization tool enabling users to translate directly in the React app they develop +- [js-lingui](https://github.com/lingui/js-lingui) - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript. ### Framework bindings / integrations @@ -736,26 +955,32 @@ _Internationalization / L10n / localization / translation_ - [react-elm-components](https://github.com/evancz/react-elm-components) - Write React components in Elm. - [react-famous](https://github.com/pilwon/react-famous) - React bridge to Famo.us. - [react-localstorage](https://github.com/STRML/react-localstorage) - Simple componentized localstorage implementation for Facebook's React. +- [react-lottie-player](https://github.com/mifi/react-lottie-player) - [demo](https://mifi.github.io/react-lottie-player/) - Declarative lottie animation player. - [react-on-rails](https://github.com/shakacode/react_on_rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps. -- [react-swf](https://github.com/syranide/react-swf) - Shockwave Flash Player component for React. - [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React. +- [react-threejs](https://github.com/fritx/react-threejs) - Simplest bindings between React & Three.js - [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration. - [reactive-elements](https://github.com/PixelsCommander/ReactiveElements) - Allows to use React.js component as HTML element (web component). +- [react-unity-webgl](https://github.com/elraccoone/react-unity-webgl) - Unity intergration with two-way communication using a built-in Event System. ### Integrations with Third Party Services - [react-ga](https://github.com/react-ga/react-ga) - React Google Analytics Module. - [react-google-analytics](https://github.com/hzdg/react-google-analytics) - Google analytics component. +- [react-google-autocomplete](https://github.com/ErrorPro/react-google-autocomplete) - Google Places API components and hooks. - [react-recaptcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google. - [react-stripe-checkout](https://github.com/azmenak/react-stripe-checkout) - Load stripe's checkout.js as a react component. Easiest way to use checkout with React. - [redux-segment](https://github.com/rangle/redux-segment) - Segment.io analytics integration for redux. +- [react-slack-notification](https://github.com/Nilanth/react-slack-notification) - Send messages and error logs to a Slack channel directly. +- [react-firebase-hooks](https://github.com/csfrequency/react-firebase-hooks) - Hooks to integrate firebase in your application. ## Performance +**[`Back to top ⬆️`](#table-of-contents)** + ### UI - [inferno](https://github.com/trueadm/inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces. -- [react-canvas](https://github.com/Flipboard/react-canvas) - High performance <canvas> rendering for React components. - [react-fastclick](https://github.com/JakeSidSmith/react-fastclick) - Fast Touch Events for React. - [react-static-container](https://github.com/reactjs/react-static-container) - Renders static content efficiently. @@ -763,7 +988,6 @@ _Internationalization / L10n / localization / translation_ - [react-perf-tool](https://github.com/RamonGebben/react-perf-tool) - Debug performance of your React application. - [react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer) - Render visualizer for ReactJS. -- [why-did-you-update](https://github.com/garbles/why-did-you-update) - Puts your console on blast when React is making unnecessary updates. #### Lazy Load @@ -780,22 +1004,24 @@ _Internationalization / L10n / localization / translation_ ### Server-Side Rendering +- [iSSR](https://github.com/AlexSergey/issr) - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. - [react-esi](https://github.com/dunglas/react-esi) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments ## Dev Tools +**[`Back to top ⬆️`](#table-of-contents)** + ### Test -- [carte-blanche](https://github.com/carteb/carte-blanche) - An isolated development space with integrated fuzz testing for your components. - [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme. - [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React. - [jest-cli](https://github.com/facebook/jest) - Painless JavaScript Testing. -- [legit-tests](https://github.com/Legitcode/tests) - Chainable, easy to read, React testing library. - [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. -- [redux-ava](https://github.com/sotojuan/redux-ava) - Write AVA tests for redux pretty quickly. - [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. -- [ui-harness](https://github.com/philcockfield/ui-harness) - Create, isolate and test modular UI components in React. +- [rut](https://github.com/milesj/rut) - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers. - [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer. +- [playwright](https://github.com/microsoft/playwright) enables reliable end-to-end testing for modern web apps. + ### Redux @@ -816,22 +1042,38 @@ _Internationalization / L10n / localization / translation_ ### Miscellaneous +- [component-controls](https://github.com/ccontrols/component-controls) - [demo](https://component-controls.com) - [docs](https://component-controls.com/tutorial) - A next-generation tool to create blazing-fast documentation sites. - [cosmos-js](https://github.com/skidding/cosmos) - DX tool for designing truly encapsulated React components. -- [mighty-react-snippets](https://github.com/nicksp/mighty-react-snippets) - Crafty React and Redux ES6 snippets for Atom Editor. -- [react-atellier](https://github.com/scup/atellier) - The smartest way to share interactive components with your team. -- [react-heatpack](https://github.com/insin/react-heatpack) - A 'heatpack' command for quick React development with webpack hot reloading. +- [react-demo-tab-cli](https://github.com/mkosir/react-demo-tab-cli) - CLI tool for creating demos of react components. - [react-styleguidist](https://github.com/sapegin/react-styleguidist) - React style guide generator. - [standard-react](https://github.com/feross/standard) - JavaScript Standard Style Guide. +- [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components visually. +- [SimpleLocalize](https://github.com/simplelocalize/simplelocalize-cli) - Open source CLI tool for finding i18n keys in React projects. +- [react-device-frameset](https://github.com/zheeeng/react-device-frameset) - React device frameset component. ## Miscellaneous +**[`Back to top ⬆️`](#table-of-contents)** + +- [DataFormsJS JSX Loader](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page. - [html-to-react-components](https://github.com/roman01la/html-to-react-components) - Extract annotated portions of HTML into React components as separate modules. - [htmltojsx](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React. It's magic!. - [jsonx](https://github.com/repetere/jsonx) - React JSON Syntax. - [mozaik](https://github.com/plouc/mozaik) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards. - [react-blessed](https://github.com/Yomguithereal/react-blessed) - A react renderer for blessed. +- [jsondiffpatch-react](https://github.com/bluepeter/jsondiffpatch-react) - JSON diffing. +- [iron-session](https://github.com/vvo/iron-session) - Secure, stateless, and cookie-based session library. ### Static Website Generator - [gatsby](https://github.com/gatsbyjs/gatsby) - Transform plain text into dynamic blogs and websites using React.js. -- [phenomic](https://github.com/MoOx/phenomic) - Modern static\* website generator based on the React and Webpack ecosystem. + +## Cloud Solutions + +**[`Back to top ⬆️`](#table-of-contents)** + +### Databases + +- [BCMS](https://github.com/bcms/cms) - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next. +- [crisp-bigquery](https://github.com/winwiz1/crisp-bigquery) - Full stack Google BigQuery with Express in TypeScript. +- [react-server-routing-example](https://github.com/mhart/react-server-routing-example) - Universal client/server routing and data with AWS DynamoDB. diff --git a/declined.json b/declined.json deleted file mode 100644 index f94ddfc..0000000 --- a/declined.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "react-chips": { - "@brillout": true - }, - "react-weui": { - "@brillout": true - }, - "stardust": { - "@brillout": true - }, - "echarts-for-react": { - "@brillout": true - }, - "cx-core": { - "@n337": true, - "@psyt3c": true - }, - "react-server-render-starter-kit": { - "@n337": true - }, - "react-fabric": { - "@brillout": true - }, - "react-radio-button": { - "@hjinu": true - }, - "react-bootstrap-time-picker": { - "@n337": true - }, - "react-plyr": { - "@n337": true, - "@psyt3c": true - }, - "react-tj-treeview": { - "@n337": true, - "@psyt3c": true - }, - "hoc-react-loader": { - "@brillout": true - }, - "hoc-react-animate": { - "@brillout": true - } -} diff --git a/react-logo.svg b/react-logo.svg deleted file mode 100644 index 258939a..0000000 --- a/react-logo.svg +++ /dev/null @@ -1,14 +0,0 @@ -<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg"> - <g> - <title>background - - - - - Layer 1 - - - - - - \ No newline at end of file