diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 120000 index 4daa8ec..0000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1 +0,0 @@ -../contributing.md \ No newline at end of file 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 new file mode 100644 index 0000000..b4322d0 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,22 @@ +Please abide by the following: + +- 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. + +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. + +This is a requirement for listing! + +We want this list to remain fresh. So when you do ANY PR, please also remove at least +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5dda824 --- /dev/null +++ b/README.md @@ -0,0 +1,1079 @@ +# 🚀 Absolutely Awesome React Components & Libraries + +This is a list of AWESOME components. Nope, it's NOT a comprehensive list of +every React component under the sun. So, what does "awesome" mean? Well: + +- It solves a real problem +- It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.) +- It has recent code commits! + +Look for a 🚀 for truly amazing projects. And look for quickie maintainer +commentary and reviews in _(italic parens)_ after some listings of note. + +See also: [Awesome React Frameworks](https://github.com/brillout/awesome-react-frameworks). + +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). 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 + +**[`Back to top ⬆️`](#table-of-contents)** + +### Editable data grid / spreadsheet + +- [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. +- [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. +- [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. +- [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 + +- [@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. +- [@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_ + +- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. +- [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React. +- [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_ + +- [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. +- [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. +- [reapop](https://github.com/LouisBarranqueiro/reapop) - A React & Redux notifications system. +- [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 + +- [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. + +### Menu + +_Menus / sidebars_ + +- [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-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus 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-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. + +### Tabs + +- [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component. +- [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs. + +### Loader + +_Loaders / spinners / progress bars — Let the user know that something is loading_ + +- [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-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 + +_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-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-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. +- [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-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. +- [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-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. +- [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 + +_Ways to navigate views_ + +- [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component. +- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - A React Component for binded Tabs and Swipeable 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-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-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-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-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 + +_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. +- [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-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 + +_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 + +_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 + +_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 + +- [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-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-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-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 + +_Let the user enter data_ + +#### Date / Time picker + +_Date picker / time picker / datetime picker / date range picker_ + +- [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-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. +- [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-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-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](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-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-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/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. +- [ui-switch](https://github.com/yairEO/ui-switch) - The most complete _Toggle_ component + +#### Slider + +- [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React. + +#### Radio Button + +- [react-radio-group](https://github.com/chenglou/react-radio-group) - Better radio buttons. + +#### Type Select + +_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_ + +- [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. + +#### 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](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-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. +- [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) - 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) - 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/uiwjs/react-md-editor) - A simple markdown editor with preview, implemented with React.js and TypeScript. + +#### Image Editing + +_Image manipulation_ + +- [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) - 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-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. + +#### Miscellaneous + +- [@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 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. +- [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) - 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-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_ + +- [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-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) - 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) - 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 -. +- [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 + +- [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_ + +- [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. +- [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/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. +- [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) - 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. +- [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. +- [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_ + +#### Visibility Reporter + +_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. + +#### Measurement Reporter + +_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](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. + +### Device Input + +_Turn user input into actions_ + +#### Keyboard Events + +- [react-hotkeys](https://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React. +- [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 + +- [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling. + +#### Touch Swipe + +- [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component. + +#### 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-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-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. + +### Test User Behavior + +_A/B tests, experiments, ..._ + +- [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_ + +- [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. +- [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. +- [kea](https://github.com/mariusandra/kea) - High level architecture for React apps. +- [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application. +- [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux. +- [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification. +- [redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps. +- [reselect](https://github.com/reactjs/reselect) - Selector library for Redux. +- [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 + +- [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/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-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 +- [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 + +- [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React. +- [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-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-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components. +- [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 + +- [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework. +- [react-relay](https://github.com/facebook/relay) - Relay is a JavaScript framework for building data-driven React applications. +- [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!. +- [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects. +- [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component. +- [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 + +- [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements) - Neater If and For for React JSX. + +### Isomorphic Apps + +- [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views. +- [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. +- [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React). + +### Boilerplate + +_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. +- [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. +- [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps & components and npm modules. +- [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. +- [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-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. + +### i18n + +_Internationalization / L10n / localization / translation_ + +- [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 + +- [backbone-react-component](https://github.com/magalhas/backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models. +- [elm-react-component](https://github.com/KtorZ/elm-react-component) - A React component which wraps an Elm module to be used in a React application. +- [gl-react](https://github.com/ProjectSeptemberInc/gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content. +- [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react and a whole lot more. +- [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Open source library for using D3 in React. +- [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-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-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. + +#### Inspect + +- [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. + +#### Lazy Load + +- [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements. +- [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. +- [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport. +- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. +- [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. + +### App Size + +- [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - Remove unnecessary React propTypes. +- [react-lite](https://github.com/Lucifier129/react-lite) - An implementation of React that optimizes for small script size. + +### 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 + +- [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. +- [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. +- [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. +- [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 + +- [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor) - A chart monitor for Redux DevTools. +- [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) - A resizable and movable dock for Redux DevTools monitors. +- [redux-devtools-filterable-log-monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor) - Filterable tree view monitor for Redux DevTools. +- [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector) - Another Redux DevTools Monitor. +- [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) - The default monitor for Redux DevTools with a tree view. +- [redux-devtools](https://github.com/gaearon/redux-devtools) - DevTools for Redux with hot reloading, action replay, and customizable UI. +- [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) - Redux DevTools remotely. + +### Inspect + +- [fluxguard](https://fluxguard.com) - PROD change monitoring that highlights all DOM + design changes. +- [react-inspector](https://github.com/xyc/react-inspector) - Power of Browser DevTools inspectors right inside your React app. +- [react-json-inspector](https://github.com/Lapple/react-json-inspector) - React JSON inspector component. +- [reactotron](https://github.com/reactotron/reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps. + +### 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. +- [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. + +## 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/contributing.md b/contributing.md deleted file mode 100644 index 616d3d1..0000000 --- a/contributing.md +++ /dev/null @@ -1,3 +0,0 @@ -* Don't create a pull request to add a library, instead use [devarchy.com/react](https://devarchy.com/react). -* Only create a pull request to change the categorization. -* Open an issue if you are not sure how to change the categorization to fit a library you want to add. 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 diff --git a/readme.md b/readme.md deleted file mode 100644 index 32867ef..0000000 --- a/readme.md +++ /dev/null @@ -1,1088 +0,0 @@ -# React Components & Libraries - - - Official website: [`devarchy.com/react`](https://devarchy.com/react) - - Use devarchy to add a library to the catalog - - This readme is updated when a Library is approved on Devarchy. (Meaning that all new libraries awaiting for approval are visible only on Devarchy.) - -
- -#### Contents - -- [UI Components](#ui-components) - - [Table / Data Grid](#table--data-grid) - - [Infinite Scroll](#infinite-scroll) - - [Overlay](#overlay) - - [Notification](#notification) - - [Tooltip](#tooltip) - - [Menu](#menu) - - [Sticky](#sticky) - - [Tabs](#tabs) - - [Loader](#loader) - - [Carousel](#carousel) - - [Collapse](#collapse) - - [Chart](#chart) - - [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) - - [Miscellaneous](#miscellaneous) - - [Form Components](#form-components) - - [Date / Time picker](#date--time-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) - - [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) -- [UI Layout](#ui-layout) -- [UI Animation](#ui-animation) - - [Parallax](#parallax) -- [UI Frameworks](#ui-frameworks) - - [Responsive](#responsive) - - [Bootstrap](#bootstrap) - - [Material Design](#material-design) - - [Mobile](#mobile) - - [Component Collections](#component-collections) - - [Other](#other) -- [UI Utilites](#ui-utilites) - - [Reporter](#reporter) - - [Visibility Reporter](#visibility-reporter) - - [Measurement Reporter](#measurement-reporter) - - [Device Input](#device-input) - - [Keyboard Events](#keyboard-events) - - [Scroll Events](#scroll-events) - - [Touch Events](#touch-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) -- [Dev Tools](#dev-tools) - - [Test](#test) - - [Redux](#redux) - - [Inspect](#inspect-1) - - [Miscellaneous](#miscellaneous-3) -- [Miscellaneous](#miscellaneous-4) - - [Static Website Generator](#static-website-generator) - -
-
-
-
-
-
- -## UI Components - -### Table / Data Grid - - - [reactable](https://github.com/glittershark/reactable) - Fast, flexible, and simple data tables in React. - - [ag-grid](https://github.com/ceolter/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. - - [griddle-react](https://github.com/GriddleGriddle/Griddle) - Simple Grid Component written in React. - - [react-data-components](https://github.com/carlosrocha/react-data-components) - React components for sorting, filtering and pagination of data. - - [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table) - It's a react table for bootstrap. - - [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like. - - [react-pivot](https://github.com/davidguttman/react-pivot) - React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. - - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto Responsive Layout Library For React. - - [reactabular](https://github.com/reactabular/reactabular) - Spectacular tables for React. - - [fixed-data-table](https://github.com/facebook/fixed-data-table) - A React table component designed to allow presenting thousands of rows of data. - - [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps. - - -### Infinite Scroll - - - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. - - [react-infinity](https://github.com/nmn/react-infinity) - A UITableView Inspired list and grid display solution with element culling and smooth animations. - - [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. - - [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements. - - [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. - - -### Overlay - -*Display overlay / modal / alert / dialog / lightbox / popup* - - - [react-dock](https://github.com/alexkuz/react-dock) - Resizable dockable react component. - - [react-overlays](https://github.com/react-bootstrap/react-overlays) - Utilities for creating robust overlay components. - - [boron](https://github.com/yuanyan/boron) - A collection of dialog animations with React.js. - - [react-modal2](https://github.com/cloudflare/react-modal2) - Simple modal component for React. - - [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. - - [rodal](https://github.com/chenjiahan/rodal) - A React modal with animations. - - [react-modal-box](https://github.com/sadiqevani/react-modal-box) - React Modal Box Component. - - [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. - - -### Notification - -*Toaster / snackbar — Notify the user with a modeless temporary little popup* - - - [react-notification-system](https://github.com/igorprado/react-notification-system) - A complete and totally customizable component for notifications in React. - - [react-notification](https://github.com/pburtchaell/react-notification) - Snackbar notifications for React. - - [react-s-alert](https://github.com/juliancwirko/react-s-alert) - Alerts / Notifications for React with rich configuration options. - - [react-crouton](https://github.com/xeodou/react-crouton) - A message component for reactjs. - - [reapop](https://github.com/LouisBarranqueiro/reapop) - A React & Redux notifications system. - - -### Tooltip - - - [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. - - [rc-tooltip](https://github.com/react-component/tooltip) - React Tooltip. - - [react-portal-tooltip](https://github.com/romainberger/react-portal-tooltip) - Awesome React tooltips. - - -### Menu - -*Menus / sidebars* - - - [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations. - - [react-sidebar](https://github.com/balloob/react-sidebar) - A sidebar component for React. - - [react-motion-menu](https://github.com/bokuweb/react-motion-menu) - Motion menu component powered by React Motion. - - [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React. - - [react-tree-menu](https://github.com/MandarinConLaBarba/react-tree-menu) - A stateless tree menu component for React. - - [react-metismenu](https://github.com/alpertuna/react-metismenu) - A ready-to-use menu component for React. - - [react-contextmenu](https://github.com/vkbansal/react-contextmenu) - Context Menu implemented in React. - - [rc-menu](https://github.com/react-component/menu) - React Menu. - - -### Sticky - -*Fixed headers / scroll-up headers / sticky elements* - - - [react-sticky](https://github.com/captivationsoftware/react-sticky) - <Sticky /> component for awesome React apps. - - [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it. - - [react-listview-sticky-header](https://github.com/cht8687/react-listview-sticky-header) - React listview with sticky section header. - - [react-sticky-state](https://github.com/soenkekluth/react-sticky-state) - React StickyState Component makes native position:sticky statefull and polyfills the missing sticky browser feature. - - [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. - - [react-sticky-node](https://github.com/visortelle/react-sticky-node) - Sticky react component. - - -### Tabs - - - [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component. - - [react-simpletabs](https://github.com/pedronauck/react-simpletabs) - Just a simple tabs component built with React. - - [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs. - - -### Loader - -*Loaders / spinners / progress bars — Let the user know that something is loading* - - - [halogen](https://github.com/yuanyan/halogen) - A collection of loading spinners with React.js. - - [react-ladda](https://github.com/jsdir/react-ladda) - React wrapper for Ladda buttons. - - [react-progress-button](https://github.com/mathieudutour/react-progress-button) - Simple react.js component for an inline progress indicator. - - [react-loader](https://github.com/TheCognizantFoundry/react-loader) - React component that displays a spinner via spin.js until your component is loaded. - - [react-spinkit](https://github.com/KyleAMathews/react-spinkit) - A collection of loading indicators animated with CSS for React. - - [react-progress-label](https://github.com/wangzuo/react-progress-label) - Progress label component. - - [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React. - - [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. - - [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. - - -### Carousel - - - [react-slick](https://github.com/akiran/react-slick) - React carousel component. - - [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe). - - -### Collapse - - - [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height. - - [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React. - - -### Chart - -*Display data in charts / graphs / diagrams* - - - [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js. - - [d3-react-squared](https://github.com/bgrsquared/d3-react-squared) - Lightweight event system for (d3) charts and other components for ReactJS. - - [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React. - - [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. - - [react-chartjs](https://github.com/reactjs/react-chartjs) - Common react charting components using chart.js. - - [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS. - - [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3. - - [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. - - [rumble-charts](https://github.com/RumbleInc/rumble-js-charts) - React components for building composable and flexible charts. - - [react-micro-bar-chart](https://github.com/KyleAMathews/react-micro-bar-chart) - React component for micro bar-charts rendered with D3. - - [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts. - - [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component. - - [victory](https://github.com/FormidableLabs/victory) - Data viz for React. - - [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. - - [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts. - - [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts. - - [react-trend](https://github.com/unsplash/react-trend) - Simple, elegant spark lines. - - -### Tree - -*Display a tree data structure* - - - [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. - - [react-treebeard](https://github.com/alexcurtis/react-treebeard) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable. - - -### UI Navigation - -*Ways to navigate views* - - - [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component. - - [react-swipe-views](https://github.com/damusnet/react-swipe-views) - A React Component for binded Tabs and Swipeable Views. - - -### Custom Scrollbar - - - [react-custom-scrollbars](https://github.com/malte-wessel/react-custom-scrollbars) - React scrollbars component. - - [react-scrollbar](https://github.com/souhe/reactScrollbar) - Scrollbar component for React. - - [react-smooth-scrollbar](https://github.com/idiotWu/react-smooth-scrollbar) - React implementation of smooth-scrollbar. - - [react-gemini-scrollbar](https://github.com/noeldelgado/react-gemini-scrollbar) - React component for custom overlay-scrollbars with native scrolling mechanism. - - [react-custom-scroll](https://github.com/rommguy/react-custom-scroll) - Easily customize the browser scroll bar with native OS scroll behavior. - - -### Audio / Video - - - [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo. - - [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component. - - [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React. - - [react-video](https://github.com/pedronauck/react-video) - React component to load video from Vimeo or Youtube across any device. - - [react-music](https://github.com/FormidableLabs/react-music) - Make beats with React. - - [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React. - - [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library. - - -### Map - - - [react-gmaps](https://github.com/MicheleBertoli/react-gmaps) - A Google Maps component for React.js. - - [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map. - - [react-googlemaps](https://github.com/pieterv/react-googlemaps) - A declarative React interface to Google Maps. - - [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps. - - [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API. - - [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. - - -### Time / Date / Age - -*Display time / date / age* - - - [react-time](https://github.com/andreypopp/react-time) - Component for React to render relative and/or formatted dates into <time> HTML5 element. - - [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs. - - [timeago-react](https://github.com/hustcc/timeago-react) - Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'. - - -### Photo / Image - -*Display images / photos* - - - [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component. - - [react-images](https://github.com/jossmac/react-images) - A simple lightbox component for displaying an array of images. - - [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) - 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-image-lightbox](https://github.com/fritz-c/react-image-lightbox) - React lightbox component. - - [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close. - - -### Icons - -*Display icons / icon set / emojis* - - - [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports. - - [react-emoji](https://github.com/banyan/react-emoji) - An emoji mixin for React. - - [react-emoji-react](https://github.com/conorhastings/react-emoji-react) - A clone of slack emoji reactions in react. - - -### Paginator - -*Display a control element to paginate* - - - [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination. - - -### Markdown Viewer - -*Display parsed markdow source* - - - [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components. - - -### Miscellaneous - - - [react-timesheet](https://github.com/yuanyan/react-timesheet) - Time Sheet Component for React. - - [react-blur](https://github.com/javierbyte/react-blur) - React component for blurred backgrounds. - - [react-split-pane](https://github.com/tomkp/react-split-pane) - React split-pane component. - - [typography](https://github.com/KyleAMathews/typography.js) - A powerful toolkit for building websites with beautiful typography. - - [react-json-tree](https://github.com/alexkuz/react-json-tree) - React JSON Viewer Component, Extracted from redux-devtools. - - [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - Resizable and movable component for React. - - [react-dnr](https://github.com/yongxu/react-DnR) - Dragable and Resizable window build with React.js. - - [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - Resizable component for React. #reactjs. - - [react-file-reader-input](https://github.com/ngokevin/react-file-reader-input) - React file input component for complete control over styling and abstraction from file reading. - - [react-pagespeed-score](https://github.com/cauealves/react-pagespeed-score) - A React component for display a dial-type chart of PageSpeed Insights. - - [react-autolink](https://github.com/banyan/react-autolink) - An autolink mixin for React. - - [react-svg-buttons](https://github.com/plouc/react-svg-buttons) - Configurable animated SVG buttons for react. - - [react-avatar](https://github.com/Sitebase/react-avatar) - Universal React avatar component makes it possible to generate avatars based on user information. - - [react-joyride](https://github.com/gilbarbara/react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. - - [material-color-hash](https://github.com/BelkaLab/material-color-hash) - Hash strings to Material UI colors. - - [react-facebook](https://github.com/CherryProjects/react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. - - - - -### Form Components - -*Let the user enter data* - -#### Date / Time picker - -*Date picker / time picker / datetime picker / date range picker* - - - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. - - [rc-calendar](https://github.com/react-component/calendar) - React Calendar. - - [react-date-range](https://github.com/Adphorus/react-date-range) - A React component for choosing dates and date ranges. - - [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React. - - [react-daterange-picker](https://github.com/onefinestay/react-daterange-picker) - A React based date range picker. - - [react-yearly-calendar](https://github.com/BelkaLab/react-yearly-calendar) - React.js Yearly Calendar Component. - - [react-calendar](https://github.com/freiksenet/react-calendar) - A modular toolkit to build calendar-related things in React. - - [input-moment](https://github.com/wangzuo/input-moment) - React datetime picker powered by momentjs. - - [react-datetime](https://github.com/YouCanBookMe/react-datetime) - A lightweight but complete datetime picker react component. - - [react-bootstrap-datetimepicker](https://github.com/quri/react-bootstrap-datetimepicker) - A react.js datetime picker for bootstrap. - - [react-bootstrap-daterangepicker](https://github.com/skratchdot/react-bootstrap-daterangepicker) - A date/time picker for react (using bootstrap). This is a react port of bootstrap-daterangepicker. - - [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component. - - [react-date-select](https://github.com/JedWatson/react-date-select) - A React Date Select / Picker Input Component. - - [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar) - Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more. - - [react-dates](https://github.com/airbnb/react-dates) - An easily internationalizable, mobile-friendly datepicker library for the web. - - [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React. - - -#### Input Types - -*Masked inputs, specialized inputs; email / telephone number / credit card / etc.* - - - [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-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms. - - -#### Autocomplete - -*Autosuggest / autocomplete / typeahead* - - - [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component. - - [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer. - - [react-typeahead-component](https://github.com/ezequiel/react-typeahead-component) - Typeahead, written using the React.js library. - - -#### Select - - - [react-selectize](https://github.com/furqanZafar/react-selectize) - A Stateless & Flexible Select component for React inspired by Selectize. - - [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button. - - [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS. - - [react-select-box](https://github.com/instructure-react/react-select-box) - An accessible select box component for React. - - -#### Color Picker - - - [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker. - - [react-color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome & more. - - [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React. - - -#### Toggle - - - [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox. - - [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch 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 - - - [react-radio-group](https://github.com/chenglou/react-radio-group) - Better radio buttons. - - -#### Type Select - -*Let the user select something (e.g. a tag) while typing* - - - [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags. - - [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects. - - [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea. - - [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React. - - [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React. - - -#### Autosize Input / Textarea - - - [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React. - - [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - <textarea /> component for React which grows with content. - - -#### Star Rating - - - [react-star-rating](https://github.com/cameronroe/react-star-rating) - A simple star rating component built with React. - - [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars. - - -#### Drag and Drop - - - [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component. - - [react-dnd-touch-backend](https://github.com/yahoo/react-dnd-touch-backend) - Touch Backend for react-dnd. - - [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js. - - [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React. - - [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React. - - [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. - - -#### Sortable List - -*Let the user define an order on a list* - - - [sortablejs](https://github.com/RubaXa/Sortable) - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap. - - [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - A ReactJS component that can sort any children with touch support and IE8 compatibility. - - [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) - A set of 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. - - -#### Rich Text Editor - - - [react-quill](https://github.com/zenoamaro/react-quill) - A Quill component for React. - - [react-ace](https://github.com/securingsincity/react-ace) - React Ace Component. - - [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents. - - [react-codemirror](https://github.com/JedWatson/react-codemirror) - Codemirror Component for React.js. - - [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - React wrapper for medium-editor. - - [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors. - - [ritzy](https://github.com/ritzyed/ritzy) - Collaborative web-based rich text editor. - - [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js. - - [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - React wrapper for Trumbowyg. - - [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI. - - [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - A Wysiwyg editor build on top of ReactJS and DraftJS. - - -#### Markdown Editor - - - [react-md-editor](https://github.com/JedWatson/react-md-editor) - React.js Markdown Editor Component. - - [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux. - - -#### 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. Resize and crop your uploaded image using a clear user interface. - - [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. - - -#### Form Component Collections - - - [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form. Markup adheres to Bootstrap 3 form structure. - - [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material-UI form components. - - [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. - - -#### 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. - - [react-tabguard](https://github.com/avocode/react-tabguard) - React Tabguard. - - - - - - - -## UI Layout - -*Components to layout the app's UI* - - - [rgx](https://github.com/jxnblk/rgx) - React grid system based on minimum and maximum widths. - - [react-flexbox](https://github.com/tcoopman/react-flexbox) - React flexbox implementation. - - [react-masonry-mixin](https://github.com/eiriklv/react-masonry-mixin) - A React.js mixin for using @desandro's Masonry. - - [react-inline-grid](https://github.com/broucz/react-inline-grid) - Predictable flexbox based grid for React. - - [react-layout-components](https://github.com/rofrischmann/react-layout-components) - Layout Components for React based on Flexbox. - - [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-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) - A set of React components implementing flexboxgrid with the power of CSS Modules. - - [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component for React. - - [flexbox-react](https://github.com/nachoaIvarez/flexbox-react) Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components. - - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library. - - [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen javascript Layout manager. - - [reactwm](https://github.com/stayradiated/reactwm) - A minimal window manager built using React. - - [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid) - Pinterest like layout components for React.js. - - [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications. - - [reflexbox](https://github.com/jxnblk/reflexbox) - React flexbox layout and grid system. - - [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system for React, powered by styled-components. - - [react-resizer](https://github.com/avocode/react-resizer) - A React component for resizing HTML elements. - - [m-react-splitters](https://github.com/martinnov92/React-Splitters) - React splitter component, written in TypeScript. - - - - - - - -## UI Animation - -*Animate transitions* - - - [react-tween-state](https://github.com/chenglou/react-tween-state) - React animation. - - [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems. - - [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-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react. - - [react-motion-ui-pack](https://github.com/souporserious/react-motion-ui-pack) - Wrapper component around React Motion for easier UI transitions. - - [react-magic-move](https://github.com/ryanflorence/react-magic-move) - MagicMove for React.js. - - [velocity-react](https://github.com/twitter-fabric/velocity-react) - React components for Velocity.js. - - [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations. - - [rc-animate](https://github.com/react-component/animate) - Anim react element easily. - - [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion. - - [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together. - - [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-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. - - [react.animate](https://github.com/pleasetrythisathome/react.animate) - State animation plugin for react.js. - - [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library for React. - - [animakit-rotator](https://github.com/animakit/animakit-rotator) - AnimakitRotator - React component for the 3D rotation of the blocks. - - [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. - - [react-tween](https://github.com/clari/react-tween) - Tween animation for React components. - - [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data in react. - - [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -. - - -### Parallax - - - [react-atv-img](https://github.com/keyanzhang/react-atv-img) - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. - - [react-parallax-component](https://github.com/keske/react-parallax-component) - Easiest way to add scroll parallax effect on the component. - - -## UI Frameworks - - -### Responsive - -*Set of components + responsive layout system* - - - [elemental](https://github.com/elementalui/elemental) - A flexible and beautiful UI framework for React.js. - - [rctui](https://github.com/Lobos/react-ui) - A collection of components for React. - - [belle](https://github.com/nikgraf/belle) - Configurable React Components with great UX. - - [react-uikit-components](https://github.com/otissv/react-uikit-components) - React UIkit Components for the UIKit CSS framework. - - [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch. - - [rebass](https://github.com/jxnblk/rebass) - Configurable React Stateless Functional UI Components. - - [react-foundation-apps](https://github.com/akiran/react-foundation-apps) - Foundation Apps components built with React. - - [grommet](https://github.com/grommet/grommet) - The most advanced UX framework for enterprise applications. - - [@blueprintjs/core](https://github.com/palantir/blueprint) - Core styles & components. - - [react-foundation](https://github.com/nordsoftware/react-foundation) - Foundation as React components. - - [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration. - - [pivotal-ui-react](https://github.com/pivotal-cf/pivotal-ui) - React components based on a custom version of the Bootstrap library. - - [antd](https://github.com/ant-design/ant-design) - A UI Design Language. - - -#### Bootstrap - - - [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap 3 components built with React. - - [reactstrap](https://github.com/reactstrap/reactstrap) - Simple React Bootstrap 4 components. - - -#### Material Design - - - [react-mdl](https://github.com/tleunen/react-mdl) - React Components for Material Design Lite. - - [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 specification with the power of CSS Modules. - - [react-material](https://github.com/BerkeleyTrue/react-material) - Material design components written with React.js and React Style. - - [material-ui](https://github.com/callemall/material-ui) - React Components that Implement Google's Material Design. - - [react-essence](https://github.com/Evo-Forge/Essence) - Essence - The Essential Material Design Framework. - - -### Mobile - - - [onsenui](https://github.com/OnsenUI/OnsenUI) - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components. - - [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) - A configurable Mobile UI. - - -### Component Collections - -*Set of components without layout system* - - - [dataminr-react-components](https://github.com/dataminr/react-components) - Collection of reusable React Components and utility functions. - - [react-components](https://github.com/Khan/react-components) - React components used by Khan Academy. - - -### Other - - - [react-desktop](https://github.com/gabrielbull/react-desktop) - React UI Components for macOS Sierra and Windows 10. - - [aframe-react](https://github.com/ngokevin/aframe-react) - Build virtual reality experiences with A-Frame and React. - - [admin-on-rest](https://github.com/marmelab/admin-on-rest) - A frontend framework for building admin SPAs on top of REST services, using React and Material Design. - - -## UI Utilites - - -### Reporter - -*Report computed styles* - - -#### Visibility Reporter - -*Report when a component becomes visible/hidden* - - - [react-waypoint](https://github.com/brigade/react-waypoint) - A React component to execute a function whenever you scroll to an element. - - [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) - Sensor component for React that notifies you when it goes in or out of the window viewport. - - -#### Measurement Reporter - -*Determine and report measurements of an element* - - - [react-measure](https://github.com/souporserious/react-measure) - Compute measurements of a React component. - - [react-height](https://github.com/nkbt/react-height) - Component-wrapper to determine and report children elements height. - - [react-height-reporter](https://github.com/berrtech/react-height-reporter) - React component-wrapper detecting height changes of it's children. - - [react-dimensions](https://github.com/digidem/react-dimensions) - React higher-order component to get dimensions of container. - - [react-component-queries](https://github.com/ctrlplusb/react-component-queries) - Provide props to your Components based on their Width and/or Height. - - [react-sizeme](https://github.com/ctrlplusb/react-sizeme) - Make your React Components aware of their width and height. - - [react-container-dimensions](https://github.com/okonet/react-container-dimensions) - Wrapper component that detects element resize and passes new dimensions down the tree. Based on. - - - -### Device Input - -*Turn user input into actions* - -#### Keyboard Events - - - [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components. - - [react-hotkeys](https://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React. - - [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place. - - [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events. - -#### Scroll Events - - - [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling. - -#### Touch Events - - - [react-hammerjs](https://github.com/JedWatson/react-hammerjs) - ReactJS / HammerJS integration. Support touch events in your React app. - - [react-tappable](https://github.com/JedWatson/react-tappable) - Tappable component for React. - -#### Touch Swipe - - - [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component. - -#### Mouse Events - - - [react-aim](https://github.com/gabrielbull/react-aim) - Determine the cursor aim for triggering mouse events. - - - - -### Meta Tags - -*Set meta tags, , children of <head>* - - - [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React. - - [react-document-title](https://github.com/gaearon/react-document-title) - Declarative, nested, stateful, isomorphic document.title for React. - - [react-document-meta](https://github.com/kodyl/react-document-meta) - HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. - - - -### Portal - -*Render an element at an arbitrary DOM node* - - - [react-portal](https://github.com/tajo/react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body. - - [react-layer-stack](https://github.com/fckt/react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application. - - [react-gateway](https://github.com/cloudflare/react-gateway) - Render React DOM into a new context (aka "Portal"). - - - - -### Test User Behavior - -*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 - -*Libraries that help with code design* - - -### Data Store - -*Data flow / data management / data stores / components state / data flow* - - - [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux. - - [fluorine-lib](https://github.com/philpl/fluorine) - Reactive state and side effect management for React using a single stream of actions. - - [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Redux higher order reducer + action to reduce actions under a single subscriber notification. - - [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application. - - [shasta](https://github.com/shastajs/shasta) - Dead simple + opinionated toolkit for building redux/react applications. - - [react-redux-provide](https://github.com/loggur/react-redux-provide) - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. Share, manipulate, and replicate application state across any number of components. - - [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) - Store enhancer for which allows batching subscribe notifications. - - [reflux](https://github.com/reflux/refluxjs) - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux. - - [fluxxor](https://github.com/BinaryMuse/fluxxor) - Flux architecture tools for React. - - [fluxible](https://github.com/yahoo/fluxible) - A pluggable container for universal flux applications. - - [alt](https://github.com/goatslacker/alt) - Isomorphic flux implementation. - - [baobab-react](https://github.com/Yomguithereal/baobab-react) - React integration for Baobab. - - [reselect](https://github.com/reactjs/reselect) - Selector library for Redux. - - [react-controllables](https://github.com/matthewwithanm/react-controllables) - Easily create controllable components. - - [recompose](https://github.com/acdlite/recompose) - A React utility belt for function components and higher-order components. - - [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. - - [mobx-react](https://github.com/mobxjs/mobx-react) - React bindings for MobX. Create fully reactive components. - - [cerebral](https://github.com/cerebral/cerebral) - A state controller with its own debugger. - - [kea](https://github.com/mariusandra/kea) - High level architecture for React apps. - - -### Form Logic - - - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema. - - [react-validation-mixin](https://github.com/jurassix/react-validation-mixin) - Simple validation mixin (HoC) for React. - - [newforms](https://github.com/insin/newforms) - INACTIVE] Isomorphic form-handling for React. - - [formsy-react](https://github.com/christianalfoni/formsy-react) - A form input builder and validator for React JS. - - [redux-form](https://github.com/erikras/redux-form) - A Higher Order Component using react-redux to keep form state in a Redux store. - - [winterfell](https://github.com/andrewhathaway/Winterfell) - Generate complex, validated and extendable JSON-based forms in React. - - [react-redux-form](https://github.com/davidkpiano/react-redux-form) - Create forms easily in React with Redux. - - [tcomb-form](https://github.com/gcanti/tcomb-form) - Forms library for react. - - [plexus-form](https://github.com/AppliedMathematicsANU/plexus-form) - A dynamic form component for react using JSON-Schema. - - [cerebral-module-forms](https://github.com/cerebral/cerebral-module-forms) - A forms handler for Cerebral. - - -### Router - - - [react-router](https://github.com/reactjs/react-router) - A complete routing library for React. - - [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React. - - [redux-router](https://github.com/acdlite/redux-router) - Redux bindings for React Router – keep your router state inside your Redux store. - - [react-router-scroll](https://github.com/taion/react-router-scroll) - React Router scroll management. - - [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps. - - [rrtr](https://github.com/taion/rrtr) - A complete routing solution for React.js. - - [react-router-redux](https://github.com/reactjs/react-router-redux) - Ruthlessly simple bindings to keep react-router and redux in sync. - - [react-breadcrumbs](https://github.com/svenanders/react-breadcrumbs) - Automatic breadcrumbs for React-Router. - - [monorouter](https://github.com/matthewwithanm/monorouter) - An isomorphic JS router. - - [cerebral-module-router](https://github.com/cerebral/cerebral-module-router) - An opinionated URL change handler for Cerebral. - - -### Props from server - -*Component properties asynchronously fetched over the network* - - - [react-async](https://github.com/andreypopp/react-async) - Asynchronously fetch data for React components. - - [redux-async-connect](https://github.com/Rezonans/redux-async-connect) - It allows you to request async data, store them in redux state and connect them to your react component. - - [async-props](https://github.com/ryanflorence/async-props) - Co-located data loading for React Router. - - [react-router-relay](https://github.com/relay-tools/react-router-relay) - Relay integration for React Router. - - [redux-connect](https://github.com/makeomatic/redux-connect) - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React. - - [react-resolver](https://github.com/ericclemmons/react-resolver) - Async rendering & data-fetching for universal React applications. - - [react-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components. - - [redial](https://github.com/markdalgleish/redial) - Universal data fetching and route lifecycle management for React etc. - - -### Communication with server - - - [adrenaline](https://github.com/gyzerok/adrenaline) - Simple Relay alternative. - - [react-transmit](https://github.com/RickWong/react-transmit) - Relay-inspired library based on Promises instead of GraphQL. - - [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework. - - [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. - - [cerebral-module-http](https://github.com/cerebral/cerebral-module-http) - HTTP module for Cerebral. - - -### CSS / Style - - - [react-responsive](https://github.com/contra/react-responsive) - Media queries in react for responsive design. - - [react-css-modules](https://github.com/gajus/react-css-modules) - Seamless mapping of class names to CSS modules inside of React components. - - [aphrodite](https://github.com/Khan/aphrodite) - It's inline styles, but they work!. - - [postcss-js](https://github.com/postcss/postcss-js) - PostCSS for React Inline Styles, Free Style and other CSS-in-JS. - - [react-inline-css](https://github.com/RickWong/react-inline-css) - Write CSS inside your React components!. - - [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. - - [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component. - - [react-look](https://github.com/rofrischmann/react-look) - Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools. - - [stilr](https://github.com/kodyl/stilr) - Encapsulated styling for your javascript components with all the power of javascript and CSS combined. - - [react-css-components](https://github.com/andreypopp/react-css-components) - Define React presentational components with CSS. - - [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects. - - [radium](https://github.com/FormidableLabs/radium) - A set of tools to manage inline styles on React elements. - - [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age. - - -### HTML Template - - - [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. - - [hyperx](https://github.com/substack/hyperx) - Tagged template string virtual dom builder. - - -### Isomorphic Apps - - - [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views. - - [react-server](https://github.com/redfin/react-server) - React framework with server render for blazing fast page load and seamless transitions between pages in the browser. - - [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React). - - [isomorphic-relay](https://github.com/denvned/isomorphic-relay) - Adds server side rendering support to React Relay. - - [rill](https://github.com/rill-js/rill) - Universal web application framework. - - [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader) - Isomorphic CSS style loader for Webpack. - - -### Boilerplate - -*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. - - [redux-cli](https://github.com/SpencerCDixon/redux-cli) - An opinionated CLI for building redux/react apps quicker. - - [reactuate](https://github.com/reactuate/reactuate) - React/Redux stack (not a boilerplate kit). - - [essential-react](https://github.com/pheuter/essential-react) - A minimal skeleton for building testable React apps using Babel. - - [gluestick](https://github.com/TrueCar/gluestick) - GlueStick is a command line interface for quickly developing universal web applications using React and Redux. - - [relay-fullstack](https://github.com/lvarayut/relay-fullstack) - Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS. - - [universal-redux](https://github.com/bdefore/universal-redux) - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to. - - [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps & components and npm modules. - - [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform. - - [generator-starhackit](https://github.com/FredericHeem/starhackit) - StarHackIt: React/Redux + Node full-stack starter kit with authentication and authorization, data backed by SQL. - - [react-isomorphic-starterkit](https://github.com/RickWong/react-isomorphic-starterkit) - Create an isomorphic React app in less than 5 minutes. - - [generator-react-webpack](https://github.com/react-webpack-generators/generator-react-webpack) - Yeoman generator for ReactJS and Webpack. - - [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Live editing development on desktop app. - - [reactpack](https://github.com/olahol/reactpack) - Build your react apps with one command and one `npm i`. - - [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project. - - [generator-flux-on-rails](https://github.com/alexfedoseev/generator-flux-on-rails) - Scaffolder of universal Flux / Redux app, backed by Rails API. - - [roc](https://github.com/rocjs/roc) - Modern Application Development Ecosystem. - - [react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit) - Get started with React, Redux, and React-Router!. - - [redux-webpack-es6-boilerplate](https://github.com/nicksp/redux-webpack-es6-boilerplate) - A starter project for modern React apps with Redux. - - [react-boilerplate](https://github.com/mxstbr/react-boilerplate) - Quick packager-agnostic boilerplate for React modules using JSX. - - -### Miscellaneous - - - [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. - - [react-inlinesvg](https://github.com/matthewwithanm/react-inlinesvg) - An SVG loader component for ReactJS. - - [tcomb-react](https://github.com/gcanti/tcomb-react) - Alternative syntax for PropTypes. - - - - - - - - - - -## Utilities - - - [react-faux-dom](https://github.com/Olical/react-faux-dom) - DOM like structure that renders to React. - - [react-translate-component](https://github.com/martinandert/react-translate-component) - A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content. - - [qrcode.react](https://github.com/zpao/qrcode.react) - A <QRCode/> component for use with React. - - [react-media](https://github.com/ReactTraining/react-media) - A CSS media query component for React. - - [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) - Extended utils for React.Children. - - -### i18n - -*Internationalization / L10n / localization / translation* - - - [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. - - [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem. - - [react-translate-maker](https://github.com/CherryProjects/react-translate-maker) - Universal internationalization (i18n) open source library for React. - - [react-globalize](https://github.com/globalizejs/react-globalize) - Bringing the i18n functionality of Globalize, backed by CLDR, to React. - - -### Framework bindings / integrations - - - [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration. - - [react-famous](https://github.com/pilwon/react-famous) - React bridge to Famo.us. - - [backbone-react-component](https://github.com/magalhas/backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server. - - [elm-react-component](https://github.com/KtorZ/elm-react-component) - A React component which wraps an Elm module to be used in a React application. - - [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React. - - [gl-react](https://github.com/ProjectSeptemberInc/gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. - - [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Open source library for using D3 in React. - - [gl-react-dom](https://github.com/ProjectSeptemberInc/gl-react-dom) - WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. - - [react-on-rails](https://github.com/shakacode/react_on_rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps. - - [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react and a whole lot more. - - [react-swf](https://github.com/syranide/react-swf) - Shockwave Flash Player component for React. - - [react-localstorage](https://github.com/STRML/react-localstorage) - Simple componentized localstorage implementation for Facebook's React. - - [reactive-elements](https://github.com/PixelsCommander/ReactiveElements) - Allows to use React.js component as HTML element (web component). - - [react-elm-components](https://github.com/evancz/react-elm-components) - Write React components in Elm. - - -### Integrations with Third Party Services - - - [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. - - [react-google-analytics](https://github.com/hzdg/react-google-analytics) - Google analytics component. - - [react-recaptcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google. - - [redux-segment](https://github.com/rangle/redux-segment) - Segment.io analytics integration for redux. - - [react-ga](https://github.com/react-ga/react-ga) - React Google Analytics Module. - - - - - - - - - - - - - - -## Performance - -### UI - - - [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 by allowing React to short-circuit the reconciliation process. - - [react-canvas](https://github.com/Flipboard/react-canvas) - High performance <canvas> rendering for React components. - - [inferno](https://github.com/trueadm/inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces. - -#### Inspect - - - [why-did-you-update](https://github.com/garbles/why-did-you-update) - Puts your console on blast when React is making unnecessary updates. - - [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. - -#### Lazy Load - - - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. - - [react-infinity](https://github.com/nmn/react-infinity) - A UITableView Inspired list and grid display solution with element culling and smooth animations. - - [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. - - [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements. - - [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. - - [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport. - -### App Size - - - [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - Remove unnecessary React propTypes from the production build. - - [react-lite](https://github.com/Lucifier129/react-lite) - An implementation of React that optimizes for small script size. - - - - - - - - -## Dev Tools - -### Test - - - [ui-harness](https://github.com/philcockfield/ui-harness) - Create, isolate and test modular UI components in React. - - [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. - - [legit-tests](https://github.com/Legitcode/tests) - Chainable, easy to read, React testing library. - - [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for [unexpected]( to enable testing the full React virtual DOM, and also the shallow renderer. - - [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme. - - [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. - - [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React. - - [redux-ava](https://github.com/sotojuan/redux-ava) - Write AVA tests for redux pretty quickly. - - [carte-blanche](https://github.com/carteb/carte-blanche) - An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them. - - [jest-cli](https://github.com/facebook/jest) - Painless JavaScript Testing. - - - -### Redux - - - [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector) - Another Redux DevTools Monitor. - - [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor) - A chart monitor for Redux DevTools. - - [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) - A resizable and movable dock for Redux DevTools monitors. - - [redux-devtools-filterable-log-monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor) - Filterable tree view monitor for Redux DevTools. - - [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) - The default monitor for Redux DevTools with a tree view. - - [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) - Redux DevTools remotely. - - [redux-devtools](https://github.com/gaearon/redux-devtools) - DevTools for Redux with hot reloading, action replay, and customizable UI. - - - -### Inspect - - - [react-inspector](https://github.com/xyc/react-inspector) - Power of Browser DevTools inspectors right inside your React app. - - [react-json-inspector](https://github.com/Lapple/react-json-inspector) - React JSON inspector component. - - [reactotron](https://github.com/reactotron/reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps. - - - -### Miscellaneous - - - [react-atellier](https://github.com/scup/atellier) - The smartest way to share interactive components with your team. - - [standard-react](https://github.com/feross/standard) - JavaScript Standard Style Guide. - - [cosmos-js](https://github.com/skidding/cosmos) - DX tool for designing truly encapsulated React components. - - [react-heatpack](https://github.com/insin/react-heatpack) - A 'heatpack' command for quick React development with webpack hot reloading. - - [mighty-react-snippets](https://github.com/nicksp/mighty-react-snippets) - Crafty React and Redux ES6 snippets for Atom Editor. - - [react-styleguidist](https://github.com/sapegin/react-styleguidist) - React style guide generator. - - - - - - - - - -## Miscellaneous - - - [structor](https://github.com/ipselon/structor) - An advanced GUI editor for React. - - [react-blessed](https://github.com/Yomguithereal/react-blessed) - A react renderer for blessed. - - [react-komik](https://github.com/sonnylazuardi/react-komik) - ReactJS based comic strip creator using fabric.js canvas rendering. - - [mozaik](https://github.com/plouc/mozaik) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards. - - [htmltojsx](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React. It's magic!. - - [react-bash](https://github.com/zackargyle/react-bash) - A configurable/extendable bash terminal React component. - - [html-to-react-components](https://github.com/roman01la/html-to-react-components) - Extract annotated portions of HTML into React components as separate modules. - - -### 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. - - [sitegen](https://github.com/andreypopp/sitegen) - Generate websites by composing React components.