├── CONTRIBUTING.md ├── code-of-conduct.md ├── license └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Please abide by the following: 2 | 3 | - Keep the alphabetic sort order of components. 4 | - Reference a component only once. 5 | - Describe it succinctly, sufficiently, and without flair. 6 | - Don't mention "React" in the description. 7 | - Keep descriptions to one line (no wrapping). Use the `Preview changes` tab before committing to ensure this. 8 | - If available, please also include a direct link to a demo site. 9 | - If available, please also include a direct link to a separate docs site. 10 | 11 | Here's an example of how your listing should appear: 12 | 13 | - [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. 14 | 15 | # TO ADD A LISTING, YOU MUST REMOVE ONE (or more) UN-AWESOME COMPONENT IN ANY PR. 16 | 17 | This is a requirement for listing! 18 | 19 | We want this list to remain fresh. So when you do ANY PR, please also remove at least 20 | 1 un-awesome component. This could be a component that hasn't been updated in 21 | a year or more; a component that has been replaced by better options; or one 22 | that just doesn't really seem "awesome" anymore. 23 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at 59 | github.com/awesome-react-components/code-of-conduct@brillout.com. All 60 | complaints will be reviewed and investigated and will result in a response that 61 | is deemed necessary and appropriate to the circumstances. The project team is 62 | obligated to maintain confidentiality with regard to the reporter of an incident. 63 | Further details of specific enforcement policies may be posted separately. 64 | 65 | Project maintainers who do not follow or enforce the Code of Conduct in good 66 | faith may face temporary or permanent repercussions as determined by other 67 | members of the project's leadership. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 72 | available at [http://contributor-covenant.org/version/1/4][version] 73 | 74 | [homepage]: http://contributor-covenant.org 75 | [version]: http://contributor-covenant.org/version/1/4/ 76 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Absolutely Awesome React Components & Libraries 2 | 3 | This is a list of AWESOME components. Nope, it's NOT a comprehensive list of 4 | every React component under the sun. So, what does "awesome" mean? Well: 5 | 6 | - It solves a real problem 7 | - It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.) 8 | - It has recent code commits! 9 | 10 | Look for a 🚀 for truly amazing projects. And look for quickie maintainer 11 | commentary and reviews in _(italic parens)_ after some listings of note. 12 | 13 | Maintainers: 14 | 15 | - [@petebray](https://github.com/bluepeter), author of [Fluxguard](https://fluxguard.com) — monitor PROD website changes. 16 | - [@brillout](https://twitter.com/brillout), author of [Wildcard API](https://github.com/reframejs/wildcard-api) — create an RPC-like API as an alternative to REST and GraphQL. 17 | 18 | ### Contributing 19 | 20 | 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. 21 | 22 | ## UI Components 23 | 24 | ### Editable data grid / spreadsheet 25 | 26 | - [ag-grid](https://github.com/ceolter/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. 27 | - [gigatables-react](https://github.com/GigaTables/reactables) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. 28 | - [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid. 29 | 30 | ### Table 31 | 32 | - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto Responsive Layout Library For React. 33 | - [griddle-react](https://github.com/GriddleGriddle/Griddle) - Simple grid component that can display data as a table, a list of cards, or on the map. 34 | - [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. 🆕 35 | - [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 36 | - [mui-datatables](https://github.com/gregnb/mui-datatables) - Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows. 37 | - [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 38 | - [react-pivot](https://github.com/davidguttman/react-pivot) - Data-grid component with pivot-table-like for data display, filtering, and exploration. 39 | - [react-table](https://github.com/tannerlinsley/react-table) - [demo](https://github.com/tannerlinsley/react-table/blob/master/docs/examples.md) - Hooks for building fast and extendable tables and datagrids 40 | - [rsuite-table](https://github.com/rsuite/rsuite-table) - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. 41 | - [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps. 42 | - [DevExtreme React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/) - High-performance plugin-based data grid for Bootstrap and Material Design. 43 | - [Smart React Grid](https://htmlelements.com/docs/react/) - Fast and feature-complete data grid with Material Design. 44 | 45 | ### Infinite Scroll 46 | - [@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. 47 | - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. 48 | - [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component. 49 | - [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. 50 | - [react-recycled-scrolling](https://github.com/sarons/react-recycled-scrolling) - [npm](https://www.npmjs.com/package/react-recycled-scrolling) - [demo](https://y8mlf.csb.app/) - Simulate scrolling using fixed number of DOM elements for large lists with React Hooks 51 | 52 | ### Overlay 53 | 54 | _Display overlay / modal / alert / dialog / lightbox / popup_ 55 | 56 | - [boron](https://github.com/yuanyan/boron) - A collection of dialog animations with React.js. 57 | - [modali](https://github.com/upmostly/modali) - A delightful modal dialog component, built from the ground up to support React Hooks. 58 | - [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. 59 | - [react-dock](https://github.com/alexkuz/react-dock) - Resizable dockable react component. 60 | - [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React. 61 | - [react-skylight](https://github.com/marcio/react-skylight) - A react component for modals and dialogs. 62 | 63 | ### Notification 64 | 65 | _Toaster / snackbar — Notify the user with a modeless temporary little popup_ 66 | 67 | - [cogo-toast](https://github.com/Cogoport/cogo-toast) - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_ 68 | - [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. 69 | - [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 70 | - 🚀 [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. 71 | - [react-toast-notifications](https://github.com/jossmac/react-toast-notifications) - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system. 72 | - [reapop](https://github.com/LouisBarranqueiro/reapop) - A React & Redux notifications system. 73 | - [react-snackbar-alert](https://github.com/joeattardi/react-snackbar-alert) - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API. 74 | - [simple-react-notifications](https://github.com/alexpermyakov/simple-react-notifications) - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip). 75 | 76 | ### Tooltip 77 | 78 | - [react-portal-tooltip](https://github.com/romainberger/react-portal-tooltip) - Awesome React tooltips. 79 | - [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. 80 | 81 | ### Menu 82 | 83 | _Menus / sidebars_ 84 | 85 | - [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar with effects and styles. 86 | - [react-contextmenu](https://github.com/vkbansal/react-contextmenu) - Context Menu implemented in React. 87 | - [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React. 88 | - [react-sidebar](https://github.com/balloob/react-sidebar) - A sidebar component for React. 89 | 90 | ### Sticky 91 | 92 | _Fixed headers / scroll-up headers / sticky elements_ 93 | 94 | - [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it. 95 | - [react-sticky](https://github.com/captivationsoftware/react-sticky) - <Sticky /> component for awesome React apps. 96 | - [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. 97 | 98 | ### Tabs 99 | 100 | - [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component. 101 | - [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs. 102 | 103 | ### Loader 104 | 105 | _Loaders / spinners / progress bars — Let the user know that something is loading_ 106 | 107 | 108 | - [react-block-ui](https://github.com/availity/react-block-ui) - Easy way to block the user from interacting with your UI. 109 | - [react-loader](https://github.com/TheCognizantFoundry/react-loader) - React component that displays a spinner via spin.js until your component is loaded. 110 | - [react-loaders](https://github.com/jonjaques/react-loaders) - Lightweight wrapper around Loaders.css. 111 | - [react-md-spinner](https://github.com/tsuyoshiwada/react-md-spinner) - Material Design spinner components for React.js. 112 | - [react-progress-button](https://github.com/mathieudutour/react-progress-button) - Simple react.js component for an inline progress indicator. 113 | - [react-progress-label](https://github.com/wangzuo/react-progress-label) - Progress label component. 114 | - [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React. 115 | - [react-spinkit](https://github.com/KyleAMathews/react-spinkit) - A collection of loading indicators animated with CSS for React. 116 | - [react-spinners-css](https://github.com/JoshK2/react-spinners-css) - Amazing collection of react spinners components. 117 | 118 | ### Carousel 119 | - [@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. 120 | - [flat-carousel](https://github.com/jl-/flat-carousel) - [demo](https://671g5.csb.app/) Light weight carousel component for general purpose. 121 | - [react-awesome-slider](https://github.com/rcaferati/react-awesome-slider) - [demo](https://caferati.me/demo/react-awesome-slider) - 3D animated 60fps media and content slider/carousel. 122 | - [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) - Built from scratch and not highly opinionated. 123 | - [react-id-swiper](https://github.com/kidjp85/react-id-swiper) - A library to use idangerous Swiper as a ReactJs component 124 | - [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe). 125 | - [react-slick](https://github.com/akiran/react-slick) - React carousel component. 126 | 127 | ### Buttons 128 | 129 | - [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. 130 | 131 | ### Collapse 132 | 133 | - [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React. 134 | - [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion. 135 | 136 | ### Chart 137 | 138 | _Display data in charts / graphs / diagrams_ 139 | 140 | - [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts. 141 | - [essential js 2 charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts & graphs for react. 142 | - [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/). 143 | - [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js. 144 | - [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. 145 | - [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0. 146 | - [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React. 147 | - [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS. 148 | - [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component. 149 | - [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts. 150 | - [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. 151 | - [react-sparkline](https://github.com/KyleAMathews/react-sparkline) - React component for rendering simple sparklines. 152 | - [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component. 153 | - [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts. 154 | - [react-trend](https://github.com/unsplash/react-trend) - Simple, elegant spark lines. 155 | - [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3. 156 | - [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. 157 | - [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts. 158 | - [victory](https://github.com/FormidableLabs/victory) - Data viz for React. 159 | - [reaviz](https://github.com/jask-oss/reaviz) - ReactJS Data Visualization Library based on D3.js. 160 | - [semiotic](https://semiotic.nteract.io/) - Semiotic is a data visualization framework for React. 161 | - [DevExtreme React Chart](https://devexpress.github.io/devextreme-reactive/react/chart/) - High-performance plugin-based chart for Bootstrap and Material Design. 162 | 163 | ### Tree 164 | 165 | _Display a tree data structure_ 166 | 167 | - [react-treebeard](https://github.com/alexcurtis/react-treebeard) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable. 168 | - [react-treeview](https://github.com/chenglou/react-treeview) - Easy, light, flexible tree view made with React. 169 | - [react-ui-tree](https://github.com/pqx/react-ui-tree) - React tree component. 170 | 171 | ### UI Navigation 172 | 173 | _Ways to navigate views_ 174 | 175 | - [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component. 176 | - [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - A React Component for binded Tabs and Swipeable Views. 177 | 178 | ### Custom Scrollbar 179 | 180 | - [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. 181 | - [react-scrollbar](https://github.com/souhe/reactScrollbar) - Scrollbar component for React. 182 | - [react-shadow-scroll](https://github.com/andrelmlins/react-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists. 183 | 184 | ### Audio / Video 185 | 186 | - [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React. 187 | - [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including YouTube. 188 | - [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React. 189 | - [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component. 190 | - [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library. 191 | - [material-ui-audio-player](https://github.com/Werter12/material-ui-audio-player) - Audio player for material ui design. 192 | 193 | ### Map 194 | 195 | - [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map. 196 | - [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API. 197 | - [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps. 198 | - [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js and overlay API. 199 | - [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - A React binding of mapbox-gl-js. 200 | 201 | ### Time / Date / Age 202 | 203 | _Display time / date / age_ 204 | 205 | - [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs. 206 | - [timeago-react](https://github.com/hustcc/timeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'. 207 | - [react-google-flight-datepicker](https://github.com/JSLancerTeam/react-google-flight-datepicker) - Google flight date picker implemented in ReactJS. 208 | 209 | ### Photo / Image 210 | 211 | _Display images / photos_ 212 | 213 | - [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. 214 | - [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component. 215 | - [react-image-lightbox](https://github.com/fritz-c/react-image-lightbox) - React lightbox component. 216 | - [react-images](https://github.com/jossmac/react-images) - A simple lightbox component for displaying an array of images. 217 | - [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close. 218 | - [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) - Responsive React Photo Gallery. 219 | - [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG. 220 | - [react-particle-image](https://github.com/malerba118/react-particle-image) - [demo](https://malerba118.github.io/react-particle-image-demo/) - Render images as interactive particles. 221 | - [react-imgix](https://github.com/imgix/react-imgix) - Add fast, responsive images as an image, picture, or background! 222 | 223 | ### Icons 224 | 225 | _Display icons / icon set / emojis_ 226 | 227 | - [iconify-react](https://github.com/iconify/iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets. 228 | - [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports. 229 | - [react-open-doodles](https://github.com/lunahq/react-open-doodles) - Awesome free illustrations as react components. 230 | 231 | ### Paginator 232 | 233 | _Display a control element to paginate_ 234 | 235 | - [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination. 236 | - [react-laravel-paginex](https://github.com/lionix-team/react-laravel-paginex) - Laravel Pagination with ReactJS (customizable). 237 | 238 | ### Markdown Viewer 239 | 240 | _Display parsed markdow source_ 241 | 242 | - [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components. 243 | 244 | ### Miscellaneous 245 | 246 | - [react-avatar](https://github.com/Sitebase/react-avatar) - Universal React avatar component makes it possible to generate avatars based on user information. 247 | - [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars. 248 | - [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 249 | - [react-blur](https://github.com/javierbyte/react-blur) - React component for blurred backgrounds. 250 | - [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. 251 | - [react-facebook](https://github.com/CherryProjects/react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. 252 | - [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. 253 | - [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot) - [demo](https://github.com/anishagg17/PIzzaBuilder) - A simple chatbot component to create conversation chats. 254 | - [react-file-reader-input](https://github.com/ngokevin/react-file-reader-input) - File input component for control for file reading styling and abstraction. 255 | - [react-filter-control](https://github.com/komarovalexander/react-filter-control) - The React filterbuilder component for building the filter criteria in the UI. 256 | - [react-joyride](https://github.com/gilbarbara/react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. 257 | - [react-json-tree](https://github.com/alexkuz/react-json-tree) - React JSON Viewer Component, Extracted from redux-devtools. 258 | - [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - Resizable and movable component for React. 259 | - [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - Resizable component for React. #reactjs. 260 | - [react-split-pane](https://github.com/tomkp/react-split-pane) - React split-pane component. 261 | - [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. 262 | - [typography](https://github.com/KyleAMathews/typography.js) - A powerful toolkit for building websites with beautiful typography. 263 | - [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. 264 | 265 | ### Form Components 266 | 267 | _Let the user enter data_ 268 | 269 | #### Date / Time picker 270 | 271 | _Date picker / time picker / datetime picker / date range picker_ 272 | 273 | - [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component. 274 | - [react-calendar](https://github.com/freiksenet/react-calendar) - A modular toolkit to build calendar-related things in React. 275 | - [react-date-range](https://github.com/Adphorus/react-date-range) - A React component for choosing dates and date ranges. 276 | - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. 277 | - [react-datepicker2](https://github.com/mberneti/react-datepicker2) - [demo](https://mberneti.github.io/react-datepicker2/) - [docs](https://mberneti.github.io/react-datepicker2/) A simple and reusable datepicker component (with persian jalali calendar support). 278 | - [react-datetime](https://github.com/YouCanBookMe/react-datetime) - A lightweight but complete datetime picker react component. 279 | - [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React. 280 | - [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React. 281 | - [react-nice-dates](https://github.com/hernansartorio/react-nice-dates) - [demo/docs](https://reactnicedates.hernansartorio.com/) A responsive, touch-friendly, and modular date picker library. 282 | - [react-simple-timefield](https://github.com/antonfisher/react-simple-timefield) - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. 283 | - [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`. 284 | - [react-yearly-calendar](https://github.com/BelkaLab/react-yearly-calendar) - React.js Yearly Calendar Component. 285 | - [r-date-picker](https://github.com/KELEN/r-date-picker) - React.js high customize date picker component, easy style it. 286 | - [DevExtreme React Scheduler](https://devexpress.github.io/devextreme-reactive/react/scheduler/) - High-performance plugin-based scheduler/calendar for Material Design. 287 | 288 | #### Emoji picker 289 | 290 | - [interweave-emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker) - A React based emoji picker powered by Interweave and Emojibase. 291 | 292 | #### Input Types 293 | 294 | _Masked inputs, specialized inputs; email / telephone number / credit card / etc._ 295 | 296 | - [react-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms. 297 | - [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. 298 | - [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. 299 | - [react-maskedinput](https://github.com/insin/react-maskedinput) - Masked <input/> React component. 300 | - [react-text-mask](https://github.com/msafi/text-mask) - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny. 301 | - [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. 302 | 303 | #### Autocomplete 304 | 305 | _Autosuggest / autocomplete / typeahead_ 306 | 307 | - [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component. 308 | - [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer. 309 | 310 | #### Select 311 | 312 | - [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button. 313 | - [react-select-box](https://github.com/instructure-react/react-select-box) - An accessible select box component for React. 314 | - [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS. 315 | - [react-selectize](https://github.com/furqanZafar/react-selectize) - A Stateless & Flexible Select component for React inspired by Selectize. 316 | 317 | #### Color Picker 318 | 319 | - [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React. 320 | - [react-color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome & more. 321 | - [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker. 322 | 323 | #### Toggle 324 | 325 | - [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch component. 326 | - [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox. 327 | - [react-triple-toggle](https://github.com/geobde/react-triple-toggle) - ⚛️ React multi toggle component. 328 | 329 | #### Slider 330 | 331 | - [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React. 332 | 333 | #### Radio Button 334 | 335 | - [react-radio-group](https://github.com/chenglou/react-radio-group) - Better radio buttons. 336 | 337 | #### Type Select 338 | 339 | _Let the user select something (e.g. a tag) while typing_ 340 | 341 | - [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React. 342 | - [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea. 343 | 344 | #### Tag Input 345 | 346 | _Let the user add multiple tags in a single input_ 347 | 348 | - [@pathofdev/react-tag-input](https://github.com/pathofdev/react-tag-input) - [demo & docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags 349 | - [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects. 350 | - [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags. 351 | - [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React. 352 | 353 | #### Autosize Input / Textarea 354 | 355 | - [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React. 356 | - [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - <textarea /> component for React which grows with content. 357 | 358 | #### Star Rating 359 | 360 | - [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. 361 | - [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars. 362 | - [react-star-rating](https://github.com/cameronroe/react-star-rating) - A simple star rating component built with React. 363 | 364 | #### Drag and Drop 365 | 366 | - [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React 367 | - [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React. 368 | - [react-drag-sizing](https://github.com/fritx/react-drag-sizing) - "Drag to resize" (sizing) as React Component. 369 | - [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component. 370 | - [react-dragula](https://github.com/bevacqua/react-dragula) - Drag and drop so simple it hurts. 371 | - [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js. 372 | - [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React. 373 | 374 | #### Sortable List 375 | 376 | _Let the user define an order on a list_ 377 | 378 | - [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - Sort any children with touch support and IE8 compatibility. 379 | - [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) - Higher-order components to turn any list into an animated, touch-friendly, sortable list. 380 | - [react-sortable](https://github.com/danielstocks/react-sortable) - A sortable list component built with React. 381 | - [sortablejs](https://github.com/SortableJS/Sortable) - Lists reorderable by drag-and-drop, within and among lists. 382 | 383 | #### Rich Text Editor 384 | 385 | - [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI. 386 | - [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors. 387 | - [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js. 388 | - [react-ace](https://github.com/securingsincity/react-ace) - Ace (Advanced Code Editor) wraper. 389 | - [react-codemirror](https://github.com/JedWatson/react-codemirror) - CodeMirror wrapper. 390 | - [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents. 391 | - [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). 392 | - [react-editor](https://github.com/fritx/react-editor) - Simple richtext editor that can insert images and HTML. 393 | - [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - medium-editor wrapper. 394 | - [react-quill](https://github.com/zenoamaro/react-quill) - Quill wrapper. 395 | - [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper. 396 | 397 | #### Markdown Editor 398 | 399 | - [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux. 400 | - [react-md-editor](https://github.com/JedWatson/react-md-editor) - Markdown editor. 401 | 402 | #### Image Editing 403 | 404 | _Image manipulation_ 405 | 406 | - [react-avatar-cropper](https://github.com/DropsOfSerenity/react-avatar-cropper) - Aiming to be a complete solution for avatar cropping in react. 407 | - [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - Facebook-like, avatar / profile picture component. 408 | - [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly. 409 | - [react-image-crop](https://github.com/DominicTobias/react-image-crop) - A responsive image cropping tool for React. 410 | - [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - Image cropper. 411 | 412 | #### Form Component Collections 413 | 414 | - [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material-UI form components. 415 | - [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form. 416 | - [react-input-enhancements](https://github.com/alexkuz/react-input-enhancements) - Set of enhancements for input control. 417 | - [react-widgets](https://github.com/jquense/react-widgets) - An à la carte set of polished, extensible, and accessible inputs. 418 | 419 | #### Miscellaneous 420 | 421 | - [interweave](https://github.com/milesj/interweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more. 422 | - [react-designer](https://github.com/fatiherikli/react-designer) - Easy to configure, lightweight, editable vector graphics in your react components. 423 | - [react-upload-gallery](https://github.com/TPMinan/react-upload-gallery) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize. 424 | 425 | #### Syntax Highlight 426 | 427 | - [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles. 428 | 429 | ## UI Layout 430 | 431 | _Components to layout the app's UI_ 432 | 433 | - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library. 434 | - [flexbox-react](https://github.com/nachoaIvarez/flexbox-react) Unopinionated, standard compliant flexbox components. 435 | - [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen JavaScript Layout manager. 436 | - [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system, powered by styled-components. 437 | - [m-react-splitters](https://github.com/martinnov92/React-Splitters) - Splitter component, written in TypeScript. 438 | - [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. 439 | - [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) - A set of React components implementing flexboxgrid with the power of CSS Modules. 440 | - [react-grid-layout](https://github.com/STRML/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React. 441 | - [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - Wrapper for @desandro's Masonry. 442 | - [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications. 443 | - [react-spaces](https://github.com/aeagle/react-spaces) - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components. 444 | - [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component. 445 | - [react-colrow](https://github.com/phphe/react-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow. 446 | 447 | ## UI Animation 448 | 449 | _Animate transitions_ 450 | 451 | - [react-tweenful](https://github.com/teodosii/react-tweenful) - [demo](https://teodosii.github.io/react-tweenful/) - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions. 452 | - [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data. 453 | - [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library. 454 | - [react-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. 455 | - [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together. 456 | - [react-magic-move](https://github.com/ryanflorence/react-magic-move) - MagicMove wrapper. 457 | - [react-motion-ui-pack](https://github.com/souporserious/react-motion-ui-pack) - Wrapper component around React Motion for easier UI transitions. 458 | - [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems. 459 | - [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs. 460 | - [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion. 461 | - [react-spring](https://github.com/react-spring/react-spring) - A spring physics based animation library. 462 | - [react-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react. 463 | - [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations. 464 | - [react-transitive-number](https://github.com/Lapple/react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers. 465 | - [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -. 466 | - [velocity-react](https://github.com/twitter-fabric/velocity-react) - Velocity.js wrapper. 467 | - [auto-size-transition](https://github.com/DualWield/auto-size-transition) - A component that scale dynamically according to the internal children size 468 | - [react-particles-bg](https://github.com/lindelof/particles-bg) - Particles backgrounds. 469 | 470 | ### Parallax 471 | 472 | - [react-parallax-component](https://github.com/keske/react-parallax-component) - Easiest way to add scroll parallax effect on the component. 473 | - [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. 474 | 475 | ## UI Frameworks 476 | 477 | ### Responsive 478 | 479 | _Set of components + responsive layout system_ 480 | 481 | - 🚀 [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. 482 | - [atlaskit](https://atlaskit.atlassian.com/packages) - Atlassian's official UI library, with components from _badge_ to _tree table_. 483 | - [base web](https://baseweb.design) - Base Web is a foundation for initiating, evolving, and unifying web products. 484 | - [belle](https://github.com/nikgraf/belle) - Configurable React Components with great UX. 485 | - [carbon](https://github.com/carbon-design-system/carbon) - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. 486 | - [chakra-ui](https://github.com/chakra-ui/chakra-ui) - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications. 487 | - [evergreen](https://github.com/segmentio/evergreen) - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment. 488 | - [fluent-ui](https://github.com/fluent-org/fluent-ui) - [demo/docs](https://fluent-ui.com/) - 🌈 React components that inspired by Microsoft's Fluent Design System. 489 | - [grommet](https://github.com/grommet/grommet) - The most advanced UX framework for enterprise applications. 490 | - [gestalt](https://github.com/pinterest/gestalt) - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language. 491 | - [insites-ui](https://github.com/insites-co/insites-ui) - Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components. 492 | - [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) - React components for building Microsoft web experiences. 493 | - [pivotal-ui-react](https://github.com/pivotal-cf/pivotal-ui) - React components based on a custom version of the Bootstrap library. 494 | - [primereact](https://github.com/primefaces/primereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes. 495 | - [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React. 496 | - [react-foundation-apps](https://github.com/akiran/react-foundation-apps) - Foundation Apps components built with React. 497 | - [react-foundation](https://github.com/nordsoftware/react-foundation) - Foundation as React components. 498 | - [reakit](https://github.com/reakit/reakit) - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps 499 | - [rebass](https://github.com/jxnblk/rebass) - Configurable React Stateless Functional UI Components. 500 | - [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch. 501 | - [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration. 502 | - [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. 503 | 504 | #### Material Design 505 | 506 | - 🚀 [Material-UI](https://github.com/mui-org/material-ui) - Full suite of components. Build your own design system, or start with Material Design. 507 | - [Autocomplete](https://material-ui.com/components/tree-view/) - Accessible autocomplete, combobox, multiselect 508 | - [Icons](https://material-ui.com/components/material-icons/) - 1,000+ SVG material icons. 509 | - [Modal](https://material-ui.com/components/modal/) - Accessible modal dialog component. 510 | - [Slider](https://material-ui.com/components/slider/) - Accessible slider component. 511 | - [Table](https://material-ui.com/components/tables/) - table with sorting, selecting, pagination, virtualized. 512 | - [Tree View](https://material-ui.com/components/tree-view/) - Accessible tree view component for React. 513 | - [react-essence](https://github.com/Evo-Forge/Essence) - Essence - The Essential Material Design Framework. 514 | - [react-materialize](https://github.com/react-materialize/react-materialize) - Material design for react, powered by materializecss. 515 | - [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design. 516 | 517 | ### Mobile 518 | 519 | - [antd-mobile](https://github.com/ant-design/ant-design-mobile) - Configurable Mobile UI from China. 520 | - [Ionic React](https://ionicframework.com/blog/announcing-ionic-react/) - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base. 521 | - [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. 522 | 523 | ### Component Collections 524 | 525 | - [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. 526 | - [dataminr-react-components](https://github.com/dataminr/react-components) - Collection of reusable React Components and utility functions. 527 | - [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 💰 528 | - [aframe-react](https://github.com/ngokevin/aframe-react) - Build virtual reality experiences with A-Frame and React. 529 | - [react-admin](https://github.com/marmelab/react-admin) - Build admin user experiences on top of REST and GraphQL services. 530 | - [react-desktop](https://github.com/gabrielbull/react-desktop) - React UI Components for macOS Sierra and Windows 10. 531 | - [react-stack-cards](https://github.com/yoloten/react-stack-cards) - Collection of stack card effects for galleries and preview grids. 532 | - [rsuite](https://github.com/rsuite/rsuite) - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products". 533 | 534 | 535 | ## UI Utilities 536 | 537 | ### Reporter 538 | 539 | _Report computed styles_ 540 | 541 | #### Visibility Reporter 542 | 543 | _Report when a component becomes visible/hidden_ 544 | 545 | - [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) - Sensor component. 546 | - [react-waypoint](https://github.com/brigade/react-waypoint) - A React component to execute a function whenever you scroll to an element. 547 | 548 | #### Measurement Reporter 549 | 550 | _Determine and report measurements of an element_ 551 | 552 | - [react-component-queries](https://github.com/ctrlplusb/react-component-queries) - Provide props to your Components based on their Width and/or Height. 553 | - [react-container-dimensions](https://github.com/okonet/react-container-dimensions) - Wrapper component that detects element resize. 554 | - [react-dimensions](https://github.com/digidem/react-dimensions) - React higher-order component to get dimensions of container. 555 | - [react-height](https://github.com/nkbt/react-height) - Component-wrapper to determine and report children elements height. 556 | - [react-measure](https://github.com/souporserious/react-measure) - Compute measurements of a React component. 557 | - [react-sizeme](https://github.com/ctrlplusb/react-sizeme) - Make your React Components aware of their width and height. 558 | 559 | ### Device Input 560 | 561 | _Turn user input into actions_ 562 | 563 | #### Keyboard Events 564 | 565 | - [react-hotkeys](https://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React. 566 | - [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events. 567 | - [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components. 568 | - [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place. 569 | - [useKeyCapture](https://github.com/pranesh239/use-key-capture) - A custom hook to ease the key-press listeners of a target/global. 570 | 571 | #### Scroll Events 572 | 573 | - [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling. 574 | 575 | #### Touch Swipe 576 | 577 | - [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component. 578 | 579 | #### Mouse Events 580 | 581 | - [react-aim](https://github.com/gabrielbull/react-aim) - Determine the cursor aim for triggering mouse events. 582 | - [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. 583 | 584 | ### Meta Tags 585 | 586 | _Set meta tags, , children of <head>_ 587 | 588 | - [react-document-meta](https://github.com/kodyl/react-document-meta) - HTML meta tags for React-based apps. 589 | - [react-document-title](https://github.com/gaearon/react-document-title) - Declarative, nested, stateful, isomorphic document.title for React. 590 | - [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React. 591 | 592 | ### Portal 593 | 594 | _Render an element at an arbitrary DOM node_ 595 | 596 | - [react-gateway](https://github.com/cloudflare/react-gateway) - Render React DOM into a new context (aka "Portal"). 597 | - [react-layer-stack](https://github.com/fckt/react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React. 598 | - [react-portal](https://github.com/tajo/react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body. 599 | 600 | ### Test User Behavior 601 | 602 | _A/B tests, experiments, ..._ 603 | 604 | - [react-ab](https://github.com/olahol/react-ab) - Simple declarative and universal A/B testing component for React. 605 | - [react-experiments](https://github.com/HubSpot/react-experiments) - React components for implementing UI experiments. 606 | 607 | ## Code Design 608 | 609 | _Libraries that help with code design_ 610 | 611 | ### Data Store 612 | 613 | _Data flow / data management / data stores / components state / data flow_ 614 | 615 | - [alt](https://github.com/goatslacker/alt) - Isomorphic flux implementation. 616 | - [baobab-react](https://github.com/Yomguithereal/baobab-react) - React integration for Baobab. 617 | - [cerebral](https://github.com/cerebral/cerebral) - A state controller with its own debugger. 618 | - [fluorine-lib](https://github.com/philpl/fluorine) - Reactive state and side effect management for React using a single stream of actions. 619 | - [fluxible](https://github.com/yahoo/fluxible) - A pluggable container for universal flux applications. 620 | - [fluxxor](https://github.com/BinaryMuse/fluxxor) - Flux architecture tools for React. 621 | - [kea](https://github.com/mariusandra/kea) - High level architecture for React apps. 622 | - [mobx-react](https://github.com/mobxjs/mobx-react) - React bindings for MobX. Create fully reactive components. 623 | - [react-3ducks](https://github.com/smakazmi/react-3ducks) - [demo](https://stackblitz.com/github/smakazmi/react-3ducks/tree/master/examples/todos) - Simple state management solution for React. 624 | - [react-controllables](https://github.com/matthewwithanm/react-controllables) - Easily create controllable components. 625 | - [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application. 626 | - [react-redux-provide](https://github.com/loggur/react-redux-provide) - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. 627 | - [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux. 628 | - [react-storage-hoc](https://github.com/yandavid/react-storage-hoc) - [demo](https://codesandbox.io/s/c0hxj?module=/src/App.js) - Higher-order components for working with localStorage and sessionStorage. 629 | - [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification. 630 | - [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) - Store enhancer for which allows batching subscribe notifications. 631 | - [redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps. 632 | - [reflux](https://github.com/reflux/refluxjs) - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux. 633 | - [reselect](https://github.com/reactjs/reselect) - Selector library for Redux. 634 | - [resourcerer](https://github.com/SiftScience/resourcerer) - Declarative data-fetching framework for REST APIs 635 | - [shasta](https://github.com/shastajs/shasta) - Dead simple + opinionated toolkit for building redux/react applications. 636 | 637 | ### Form Logic 638 | 639 | - [data-driven-forms](https://github.com/data-driven-forms/react-forms) - A declarative way for building forms with all the functionality. 640 | - [formcat](https://github.com/guilouro/formcat) - A simple and easy way to control forms in React using the React Context API 641 | - [formik](https://github.com/jaredpalmer/formik) - Build forms without tears and supports Validation in ease. 642 | - [formsy-react](https://github.com/formsy/formsy-react/) - A form input builder and validator for React JS. 643 | - [plexus-form](https://github.com/AppliedMathematicsANU/plexus-form) - A dynamic form component for react using JSON-Schema. 644 | - [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React hooks for form validation without the hassle. 645 | - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema. 646 | - [react-validation-mixin](https://github.com/jurassix/react-validation-mixin) - Simple validation mixin (HoC) for React. 647 | - [react-final-form](https://github.com/final-form/react-final-form) - Subscription-based form state management 648 | - [react-formawesome](https://github.com/MAKARD/react-formawesome) - Complex library for creating awesome forms. 649 | - [surveyjs](https://github.com/surveyjs/survey-library) - The advanced Survey and Form library 650 | 651 | ### Router 652 | 653 | - [cerebral-module-router](https://github.com/cerebral/cerebral-module-router) - An opinionated URL change handler for Cerebral. 654 | - [monorouter](https://github.com/matthewwithanm/monorouter) - An isomorphic JS router. 655 | - [react-breadcrumbs](https://github.com/svenanders/react-breadcrumbs) - Automatic breadcrumbs for React-Router. 656 | - [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React. 657 | - [react-router-scroll](https://github.com/taion/react-router-scroll) - React Router scroll management. 658 | - [react-router](https://github.com/reactjs/react-router) - A complete routing library for React. 659 | - [redux-router](https://github.com/acdlite/redux-router) - Redux bindings for React Router – keep your router state inside your Redux store. 660 | - [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps. 661 | - [redux-first-history](https://github.com/salvoravida/redux-first-history) - Redux First History - Redux history binding support react-router - @reach/router - wouter 662 | 663 | ### Props from server 664 | 665 | _Component properties asynchronously fetched over the network_ 666 | 667 | - [react-async](https://github.com/andreypopp/react-async) - Asynchronously fetch data for React components. 668 | - [react-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components. 669 | - [react-resolver](https://github.com/ericclemmons/react-resolver) - Async rendering & data-fetching for universal React applications. 670 | - [react-router-relay](https://github.com/relay-tools/react-router-relay) - Relay integration for React Router. 671 | - [redial](https://github.com/markdalgleish/redial) - Universal data fetching and route lifecycle management for React etc. 672 | - [redux-async-connect](https://github.com/Rezonans/redux-async-connect) - Request async data, store in redux state, and connect to your component. 673 | - [redux-connect](https://github.com/makeomatic/redux-connect) - Provides decorator for resolving async props in react-router. 674 | - [axios-react](https://github.com/soroushchehresa/axios-react) - HTTP client component for React. 675 | 676 | ### Communication with server 677 | 678 | - [adrenaline](https://github.com/gyzerok/adrenaline) - Simple Relay alternative. 679 | - [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework. 680 | - [cerebral-module-http](https://github.com/cerebral/cerebral-module-http) - HTTP module for Cerebral. 681 | - [react-apollo](https://github.com/apollostack/react-apollo) - React data container for the Apollo Client. 682 | - [react-relay](https://github.com/facebook/relay) - Relay is a JavaScript framework for building data-driven React applications. 683 | - [react-transmit](https://github.com/RickWong/react-transmit) - Relay-inspired library based on Promises instead of GraphQL. 684 | 685 | ### CSS / Style 686 | 687 | - [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. 688 | - [aphrodite](https://github.com/Khan/aphrodite) - It's inline styles, but they work!. 689 | - [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. 690 | - [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects. 691 | - [radium](https://github.com/FormidableLabs/radium) - A set of tools to manage inline styles on React elements. 692 | - [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component. 693 | - [react-css-modules](https://github.com/gajus/react-css-modules) - Seamless mapping of class names to CSS modules inside of React components. 694 | - [react-responsive](https://github.com/contra/react-responsive) - Media queries in react for responsive design. 695 | - [reactponsive](https://github.com/jmlweb/reactponsive) - Responsive components and hooks. 696 | - [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age. 697 | 698 | ### HTML Template 699 | 700 | - [hyperx](https://github.com/substack/hyperx) - Tagged template string virtual dom builder. 701 | - [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements) - Neater If and For for React JSX. 702 | - [react-templates](https://github.com/wix/react-templates) - Light weight templates for react. 703 | 704 | ### Isomorphic Apps 705 | 706 | - [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views. 707 | - [isomorphic-relay](https://github.com/denvned/isomorphic-relay) - Adds server side rendering support to React Relay. 708 | - [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader) - Isomorphic CSS style loader for Webpack. 709 | - [react-server](https://github.com/redfin/react-server) - React framework with server render for blazing fast page load. 710 | - [rill](https://github.com/rill-js/rill) - Universal web application framework. 711 | - [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React). 712 | 713 | ### Boilerplate 714 | 715 | _Scaffold / starter kit / Yeoman generator / stack ensemble / seed_ 716 | 717 | - [create-react-app](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration. 718 | - [crisp-react](https://github.com/winwiz1/crisp-react) - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance. 719 | - [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Live editing development on desktop app. 720 | - [essential-react](https://github.com/pheuter/essential-react) - A minimal skeleton for building testable React apps using Babel. 721 | - [generator-react-webpack](https://github.com/react-webpack-generators/generator-react-webpack) - Yeoman generator for ReactJS and Webpack. 722 | - [generator-starhackit](https://github.com/FredericHeem/starhackit) - Full-stack starter kit. 723 | - [gluestick](https://github.com/TrueCar/gluestick) - GlueStick is a command line interface for quickly developing universal web apps. 724 | - [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps & components and npm modules. 725 | - [react-boilerplate](https://github.com/mxstbr/react-boilerplate) - Quick packager-agnostic boilerplate for React modules using JSX. 726 | - [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project. 727 | - [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp. 728 | - [reactuate](https://github.com/reactuate/reactuate) - React/Redux stack (not a boilerplate kit). 729 | - [redux-cli](https://github.com/SpencerCDixon/redux-cli) - An opinionated CLI for building redux/react apps quicker. 730 | - [relay-fullstack](https://github.com/lvarayut/relay-fullstack) - Relay Starter Kit. 731 | - [roc](https://github.com/rocjs/roc) - Modern Application Development Ecosystem. 732 | - [universal-redux](https://github.com/bdefore/universal-redux) - An npm package that lets you jump right into coding React and Redux. 733 | - [create-react-dependency](https://github.com/andrelmlins/create-react-dependency) - Create react dependencies with no build configuration. 734 | - [phoenix](https://github.com/Sazito/phoenix) - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support. 735 | 736 | ### Miscellaneous 737 | 738 | - [react-inlinesvg](https://github.com/matthewwithanm/react-inlinesvg) - An SVG loader component for ReactJS. 739 | - [redux-auth-patch](https://github.com/lynndylanhurley/redux-auth) - Complete token authentication system for react + redux that supports isomorphic rendering. 740 | - [redux-search](https://github.com/treasure-data/redux-search) - Redux bindings for client-side search. 741 | - [tcomb-react](https://github.com/gcanti/tcomb-react) - Alternative syntax for PropTypes. 742 | - [react-find](https://github.com/geobde/react-find) - ⚛️ Elegant, accessible search component for React. 743 | - [react-universal-hooks](https://github.com/salvoravida/react-universal-hooks) - :tada: support react hooks everywhere (Functional or Class Component). 744 | 745 | ## Utilities 746 | 747 | - [qrcode.react](https://github.com/zpao/qrcode.react) - A <QRCode/> component for use with React. 748 | - [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) - Extended utils for React.Children. 749 | - [react-faux-dom](https://github.com/Olical/react-faux-dom) - DOM like structure that renders to React. 750 | - [react-media](https://github.com/ReactTraining/react-media) - A CSS media query component for React. 751 | - [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. 752 | - [react-translate-component](https://github.com/martinandert/react-translate-component) - Multi-lingual/localized text content. 753 | 754 | ### i18n 755 | 756 | _Internationalization / L10n / localization / translation_ 757 | 758 | - [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem. 759 | - [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps. 760 | - [react-translate-maker](https://github.com/CherryProjects/react-translate-maker) - Universal internationalization (i18n) open source library for React. 761 | - [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. 762 | - [js-lingui](https://github.com/lingui/js-lingui) - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript. 763 | 764 | ### Framework bindings / integrations 765 | 766 | - [backbone-react-component](https://github.com/magalhas/backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models. 767 | - [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. 768 | - [gl-react](https://github.com/ProjectSeptemberInc/gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content. 769 | - [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react and a whole lot more. 770 | - [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Open source library for using D3 in React. 771 | - [react-elm-components](https://github.com/evancz/react-elm-components) - Write React components in Elm. 772 | - [react-famous](https://github.com/pilwon/react-famous) - React bridge to Famo.us. 773 | - [react-localstorage](https://github.com/STRML/react-localstorage) - Simple componentized localstorage implementation for Facebook's React. 774 | - [react-on-rails](https://github.com/shakacode/react_on_rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps. 775 | - [react-swf](https://github.com/syranide/react-swf) - Shockwave Flash Player component for React. 776 | - [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React. 777 | - [react-threejs](https://github.com/fritx/react-threejs) - Simplest bindings between React & Three.js 778 | - [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration. 779 | - [reactive-elements](https://github.com/PixelsCommander/ReactiveElements) - Allows to use React.js component as HTML element (web component). 780 | 781 | ### Integrations with Third Party Services 782 | 783 | - [react-ga](https://github.com/react-ga/react-ga) - React Google Analytics Module. 784 | - [react-google-analytics](https://github.com/hzdg/react-google-analytics) - Google analytics component. 785 | - [react-recaptcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google. 786 | - [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. 787 | - [redux-segment](https://github.com/rangle/redux-segment) - Segment.io analytics integration for redux. 788 | 789 | ## Performance 790 | 791 | ### UI 792 | 793 | - [inferno](https://github.com/trueadm/inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces. 794 | - [react-canvas](https://github.com/Flipboard/react-canvas) - High performance <canvas> rendering for React components. 795 | - [react-fastclick](https://github.com/JakeSidSmith/react-fastclick) - Fast Touch Events for React. 796 | - [react-static-container](https://github.com/reactjs/react-static-container) - Renders static content efficiently. 797 | 798 | #### Inspect 799 | 800 | - [react-perf-tool](https://github.com/RamonGebben/react-perf-tool) - Debug performance of your React application. 801 | - [react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer) - Render visualizer for ReactJS. 802 | - [why-did-you-update](https://github.com/garbles/why-did-you-update) - Puts your console on blast when React is making unnecessary updates. 803 | 804 | #### Lazy Load 805 | 806 | - [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements. 807 | - [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. 808 | - [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport. 809 | - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. 810 | - [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. 811 | 812 | ### App Size 813 | 814 | - [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - Remove unnecessary React propTypes. 815 | - [react-lite](https://github.com/Lucifier129/react-lite) - An implementation of React that optimizes for small script size. 816 | 817 | ### Server-Side Rendering 818 | 819 | - [react-esi](https://github.com/dunglas/react-esi) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments 820 | 821 | ## Dev Tools 822 | 823 | ### Test 824 | 825 | - [carte-blanche](https://github.com/carteb/carte-blanche) - An isolated development space with integrated fuzz testing for your components. 826 | - [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme. 827 | - [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React. 828 | - [jest-cli](https://github.com/facebook/jest) - Painless JavaScript Testing. 829 | - [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. 830 | - [redux-ava](https://github.com/sotojuan/redux-ava) - Write AVA tests for redux pretty quickly. 831 | - [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. 832 | - [rut](https://github.com/milesj/rut) - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers. 833 | - [ui-harness](https://github.com/philcockfield/ui-harness) - Create, isolate and test modular UI components in React. 834 | - [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer. 835 | 836 | ### Redux 837 | 838 | - [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor) - A chart monitor for Redux DevTools. 839 | - [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) - A resizable and movable dock for Redux DevTools monitors. 840 | - [redux-devtools-filterable-log-monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor) - Filterable tree view monitor for Redux DevTools. 841 | - [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector) - Another Redux DevTools Monitor. 842 | - [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) - The default monitor for Redux DevTools with a tree view. 843 | - [redux-devtools](https://github.com/gaearon/redux-devtools) - DevTools for Redux with hot reloading, action replay, and customizable UI. 844 | - [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) - Redux DevTools remotely. 845 | 846 | ### Inspect 847 | 848 | - [fluxguard](https://fluxguard.com) - PROD change monitoring that highlights all DOM + design changes. 849 | - [react-inspector](https://github.com/xyc/react-inspector) - Power of Browser DevTools inspectors right inside your React app. 850 | - [react-json-inspector](https://github.com/Lapple/react-json-inspector) - React JSON inspector component. 851 | - [reactotron](https://github.com/reactotron/reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps. 852 | 853 | ### Miscellaneous 854 | 855 | - [cosmos-js](https://github.com/skidding/cosmos) - DX tool for designing truly encapsulated React components. 856 | - [react-demo-tab-cli](https://github.com/mkosir/react-demo-tab-cli) - CLI tool for creating demos of react components. 857 | - [react-heatpack](https://github.com/insin/react-heatpack) - A 'heatpack' command for quick React development with webpack hot reloading. 858 | - [react-styleguidist](https://github.com/sapegin/react-styleguidist) - React style guide generator. 859 | - [standard-react](https://github.com/feross/standard) - JavaScript Standard Style Guide. 860 | 861 | ## Miscellaneous 862 | 863 | - [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. 864 | - [html-to-react-components](https://github.com/roman01la/html-to-react-components) - Extract annotated portions of HTML into React components as separate modules. 865 | - [htmltojsx](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React. It's magic!. 866 | - [jsonx](https://github.com/repetere/jsonx) - React JSON Syntax. 867 | - [mozaik](https://github.com/plouc/mozaik) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards. 868 | - [react-blessed](https://github.com/Yomguithereal/react-blessed) - A react renderer for blessed. 869 | 870 | ### Static Website Generator 871 | 872 | - [gatsby](https://github.com/gatsbyjs/gatsby) - Transform plain text into dynamic blogs and websites using React.js. 873 | - [phenomic](https://github.com/MoOx/phenomic) - Modern static\* website generator based on the React and Webpack ecosystem. 874 | 875 | ## Cloud Solutions 876 | 877 | ### Databases 878 | 879 | - [crisp-bigquery](https://github.com/winwiz1/crisp-bigquery) - Full stack Google BigQuery with Express in TypeScript. 880 | - [react-server-routing-example](https://github.com/mhart/react-server-routing-example) - Universal client/server routing and data with AWS DynamoDB. 881 | --------------------------------------------------------------------------------