Awesome React Components Overview
Curated List of React Components & Libraries.
🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 brillout/awesome-react-components · ⭐ 41K · 🏷️ Front-End Development
🚀 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 (⭐1).
Maintainers:
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
Contributing
Please review our contributing guidelines (⭐41k). We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.
Table of Contents
- UI Components
- Editable data grid / spreadsheet
- Table
- Infinite Scroll
- Overlay
- Notification
- Tooltip
- Menu
- Sticky
- Tabs
- Loader
- Captcha
- Carousel
- Buttons
- Collapse
- Chart
- Command palette
- Tree
- UI Navigation
- Custom Scrollbar
- Audio / Video
- Map
- Time / Date / Age
- Photo / Image
- Icons
- Paginator
- Markdown Viewer
- Canvas
- Screenshot
- Miscellaneous
- Form Components
- UI Layout
- UI Animation
- UI Frameworks
- UI Utilities
- Code Design
- Utilities
- Performance
- Dev Tools
- Miscellaneous
- Cloud Solutions
UI Components
Editable data grid / spreadsheet
- fortune-sheet (⭐2.3k) - An online spreedsheet component that provides out-of-the-box features just like Excel.
- AG Grid (⭐12k) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- gigatables-react (⭐142) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
- MUI X Data grid (⭐3.9k) - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
- react-data-grid (⭐6.8k) - Excel-like grid.
- revo-grid (⭐2.7k) - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
- ReactGrid (⭐1.1k) - demo/docs - Add spreadsheet-like behavior to your app
- jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
Table
ka-table (⭐722) - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
mantine-datatable (⭐855) - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
material-table (⭐3.5k) - demo/docs - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
mui-datatables (⭐2.7k) - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
react-data-table (⭐2k) - demo/docs - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
TanStack Table (⭐24k) - demo - Headless UI for building powerful tables & datagrids
react-table-library (⭐717) - demo - React Table Library -- an almost headless table library -- for building better tables.
rsuite-table (⭐705) - demo/docs - A table component that supports virtualized.
sematable (⭐161) - Client side sorting, pagination, and text filter for redux/react based apps.
DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
Smart React Grid - Fast and feature-complete data grid with Material Design.
KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
Material-React-Table (⭐1.4k) - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
AG Grid - The Best JavaScript Grid in the World
Infinite Scroll
- @egjs/react-infinitegrid (⭐1.9k) - npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
- react-lazyload (⭐5.8k) - Lazyload your Component, Image or anything else where the performance matters.
- react-list (⭐2k) - A versatile infinite scroll React component.
- @af-utils/virtual (⭐75) - demo/docs - Render large scrollable lists and grids.
- react-window (⭐15k) - demo - React components for efficiently rendering large lists and tabular data
- virtua (⭐1k) - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.
Overlay
Display overlay / modal / alert / dialog / lightbox / popup
- react-aria-modal (⭐1k) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-modal (⭐7.3k) - Accessible modal dialog component for React.
- reoverlay (⭐148) - demo - The missing solution for managing modals.
- sweetalert2 (⭐17k) - demo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
- sweetalert2-react-content (⭐685) - 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 (⭐1.3k) - demo - Highly customizable and easy-to-use component for notifications.
- notistack - demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
- react-local-toast (⭐127) - demo - docs - show feedback linked to particular component instead of app-wide toasts.
- react-toast (⭐72) - demo - docs (⭐72) - Minimal toast notifications.
- 🚀 react-toastify (⭐12k) - demo - best bet out there at the moment. Hooks support. No refs.
- reapop (⭐1.5k) - A React & Redux notifications system.
- simple-react-notifications (⭐60) - demo - Tiny notification library (1kb gzip).
- react-hot-toast (⭐9.3k) - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
- Sonner - An opinionated toast component for React.
Tooltip
- react-tooltip (⭐3.5k) - React tooltip component.
Menu
Menus / sidebars
- hamburger-react (⭐938) - demo/docs - Animated hamburger menu icons for React.
- react-burger-menu (⭐5k) - An off-canvas sidebar with effects and styles.
- react-offcanvas (⭐49) - Off-canvas menus for React.
- react-planet (⭐172) - demo - Create circular menus which looks like planets.
- mantine-contextmenu (⭐118) - demo/docs - Context-menu hook/component for applications built with Mantine UI.
Sticky
Fixed headers / scroll-up headers / sticky elements
- react-headroom (⭐1.8k) - Hide your header until you need it.
- react-stickynode (⭐1.3k) - A performant and comprehensive React sticky.
Tabs
- react-tabs (⭐3.1k) - React tabs component.
- react-tabtab (⭐397) - React, tabs.
Loader
Loaders / spinners / progress bars — Let the user know that something is loading
- react-loader-spinner (⭐952) - Collection set of react-spinner for async operation.
- react-redux-loading-bar (⭐936) - Simple Loading Bar for Redux and React.
- react-spinners-css (⭐323) - Amazing collection of react spinners components.
- react-spinners (⭐3k) - A collection of loading spinner components for react.
- react-content-loader (⭐13k) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
Captcha
- react-simple-captcha (⭐38) - npm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
- procaptcha (⭐30) - demo - docs - Privacy focused free CAPTCHA
Carousel
- @egjs/react-flicking (⭐2.7k) - npm - demo - It's reliable, flexible and extendable carousel.
- react-awesome-slider (⭐2.9k) - demo - Fullpage, 3D animated, 60fps media and content slider/carousel.
- pure-react-carousel (⭐1.7k) - Built from scratch and not highly opinionated.
- react-id-swiper (⭐1.5k) - A library to use idangerous Swiper as a ReactJs component
- react-instagram-zoom-slider (⭐77) - demo - A slider component with pinch to zoom capabilities inspired by Instagram.
- react-responsive-carousel (⭐2.6k) - React.js Responsive Carousel (with Swipe).
- react-slick (⭐12k) - React carousel component.
- keen-slider (⭐4.6k) - demo - Performant carousel/slider with native touch/swipe behavior.
- swiper (⭐39k) - demo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Buttons
- react-awesome-button (⭐1.3k) - demo - 3D animated 60fps buttons with load progress and social share actions.
- reactive-button (⭐124) - demo - docs - A beautiful animated button component with progress indicator.
Collapse
- react-accessible-accordion (⭐784) - Accessible Accordion component for React.
- react-collapse (⭐1.1k) - Component-wrapper for collapse animation with react-motion.
- react-tabbordion (⭐80) - demo - Universal, semantic and CSS-only components for creating Accordions and Tabs.
Chart
Display data in charts / graphs / diagrams
- chartify (⭐690) - React.js plugin for building animated draggable and customizable charts.
- essential js 2 charts (⭐328) - Beautiful and interactive charts & graphs for react.
- echarts for react (⭐4.4k) - Wrapper around beautiful Apache Echarts
- jscharting-react (⭐18) – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
- react-chartist (⭐528) - React component for Chartist.js.
- react-charty (⭐71) - demo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
- react-chartjs-2 (⭐6.5k) - Common react charting components using Chart.js 2.0.
- react-d3-components (⭐1.6k) - D3 Components for React.
- react-dazzle (⭐1.4k) - Dashboards made easy in React JS.
- react-google-charts (⭐1.6k) - React-google-charts React component.
- react-highcharts (⭐1.3k) - React-highcharts.
- react-sigmajs (⭐258) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
- react-sparklines (⭐2.8k) - Beautiful and expressive Sparklines React component.
- react-timeseries-charts (⭐855) - Declarative timeseries charts.
- react-vis (⭐8.7k) - Data visualization library based on React and d3.
- recharts (⭐23k) - Redefined chart library built with React and D3.
- rumble-charts (⭐346) - React components for building composable and flexible charts.
- victory (⭐11k) - Data viz for React.
- semiotic - Semiotic is a data visualization framework for React.
- DevExtreme React Chart - High-performance plugin-based chart for Bootstrap and Material Design.
- Smart React Chart - Feature complete Charting library.
- react-muze (⭐16) - React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
- Flowchart React (⭐41) - Flowchart & Flowchart designer for React.js.
- react-dashboard (⭐1.6k) - Isomorphic Dashboards.
Command palette
- cmdk - Fast, composable, unstyled command menu for React.
- kbar (⭐4.7k) - demo - Fast, portable, and extensible cmd+k interface.
Tree
Display a tree data structure
- react-arborist (⭐2.8k) - demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
- react-complex-tree (⭐793) - demo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
- react-treeview (⭐1.1k) - Easy, light, flexible tree view made with React.
- he-tree-react (⭐13) - demo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.
UI Navigation
Ways to navigate views
- react-scroll (⭐4.3k) - React scroll component.
- react-swipeable-views (⭐4.4k) - A React Component for binded Tabs and Swipeable Views.
Custom Scrollbar
- rc-scrollbars (⭐142) - demo - Customizable scrollbars with flex options and 60FPS
- react-custom-scroll (⭐547) - demo - Easily customize the browser scroll bar with native OS scroll behavior.
- react-shadow-scroll (⭐28) - Component that customizes the image and inserts shadow when scrolling exists.
Audio / Video
- react-dailymotion (⭐17) - Dailymotion player component for React.
- react-player (⭐9k) - A react component for playing a variety of URLs, including YouTube.
- react-soundplayer (⭐1.5k) - Create custom SoundCloud players with React.
- react-youtube (⭐1.8k) - React.js powered YouTube player component.
- video-react (⭐2.6k) - A web video player built for the HTML5 world using React library.
- material-ui-audio-player (⭐72) - Audio player for material ui design.
- react-vision-camera (⭐8) - 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 (⭐18) - 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 (⭐6.3k) - Universal google map react component, allows render react components on the google map.
- pigeon-maps (⭐3.4k) - demo - ReactJS Maps without external dependencies.
- react-geosuggest (⭐1k) - A React autosuggest for the Google Maps Places API.
- react-leaflet (⭐5k) - React components for Leaflet maps.
- react-map-gl (⭐7.7k) - A React wrapper for MapboxGL-js and overlay API.
- react-svg-map (⭐224) - demo - A set of components to display an interactive SVG map.
Time / Date / Age
Display time / date / age
- react-timeago (⭐1k) - A simple time-ago component for ReactJs.
- timeago-react (⭐418) - Format date with
*** time ago
statement. eg: '3 hours ago'. - react-google-flight-datepicker (⭐383) - Google flight date picker implemented in ReactJS.
Photo / Image
Display images / photos
- lightGallery (⭐6.3k) - demo - docs - Full-featured lightbox gallery component.
- react-compare-image (⭐313) - demo - React component to compare two images using a slider.
- react-image-gallery (⭐3.7k) - Responsive image gallery, carousel, image slider react component.
- yet-another-react-lightbox (⭐736) - demo - docs - React lightbox component.
- react-intense (⭐184) - A React component for viewing large images up close.
- react-photo-album (⭐471) - demo - docs - Responsive React Photo Gallery.
- react-svg-pan-zoom (⭐677) - A React component that adds pan and zoom features to SVG.
- react-particle-image (⭐457) - demo - Render images as interactive particles.
- react-imgix (⭐354) - Add fast, responsive images as an image, picture, or background!
- @frameright/react-image-display-control (⭐21) - Define zoom regions for smart responsive images.
- zoom-image (⭐289) - demo - docs - A little yet powerful framework agnostic library to zoom image on the web
Icons
Display icons / icon set / emojis
- iconify-react (⭐205) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
- react-icons (⭐11k) - Svg react icons of popular icon packs using ES6 imports.
- react-open-doodles (⭐65) - Awesome free illustrations as react components.
- react-icomoon (⭐216) - With react-icomoon you can easily use the icons you have selected or created in icomoon.
- tabler-icons-react - A set of over 450 free MIT-licensed high-quality SVG icons.
- Lucide (⭐9.3k) - 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 (⭐2.7k) - A ReactJS component that creates a pagination.
- react-laravel-paginex (⭐27) - Laravel Pagination with ReactJS (customizable).
- paginated (⭐21) - React render props & custom hook to build pagination.
- react-steps (⭐15) - Demo - Responsive React Stepper.
Markdown Viewer
Display parsed markdow source
- react-markdown (⭐12k) - Render Markdown as React components.
Canvas
Sketch input using Canvas or SVG
- react-konva (⭐5.6k) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
- react-sketch (⭐670) - A Sketch tool for React based applications, backed-up by FabricJS
- react-sketch-canvas (⭐399) - Demo Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets
- react-heat-map (⭐178) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
Screenshot
- html2canvas (⭐30k) - Take screenshots of any part of your web page using Javascript.
Miscellaneous
- puck (⭐4.7k) - demo - The self-hosted visual editor for React
- react-advanced-news-ticker (⭐50) - demo - A flexible and animated vertical news ticker component
- react-avatar-generator (⭐67) - Allows users to create random kaleidoscopes to be used as avatars.
- react-awesome-query-builder (⭐1.9k) - demo - Visual query builder from form fields, with SQL, MongoDB and JSON export
- react-blur (⭐453) - React component for blurred backgrounds.
- react-demo-tab (⭐41) - demo - A React component to easily create demos of other components.
- react-facebook (⭐781) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
- fastcomments-react (⭐7) - demo - FastComments component for embedding a live comment thread on a page or SPA.
- react-pdf-viewer (⭐2.1k) - docs - A React component to view a PDF document.
- react-simple-chatbot (⭐1.7k) - demo (⭐2) - A simple chatbot component to create conversation chats.
- react-file-reader-input (⭐117) - File input component for control for file reading styling and abstraction.
- react-filter-control (⭐49) - The React filterbuilder component for building the filter criteria in the UI.
- react-headings (⭐72) - 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 (⭐6.6k) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- react-mouse-select (⭐41) - Demo A component that allows selecting DOM elements by moving the mouse
- react-resizable-and-movable (⭐3.8k) - Resizable and movable component for React.
- react-resizable-box (⭐2.4k) - Resizable component for React. #reactjs.
- react-searchbox-awesome (⭐30) - demo - Minimalistic searchbox.
- react-split-pane (⭐3.2k) - React split-pane component.
- react-swipe-to-delete-ios (⭐44) - demo - To delete an item in a list the same way iOS does.
- react-swipeable-list (⭐101) - demo - Configurable component to render list with swipeable items.
- typography (⭐3.8k) - A powerful toolkit for building websites with beautiful typography.
- react-pulse-text (⭐17) - demo/docs - Allows you to animate the text of any property of another component.
- captcha-image (⭐8) - Allows you to generate a random captcha image with options.
- react-pdf (⭐8.9k) - Display PDFs in your React app as easily as if they were images.
- react-customizable-chat-bot (⭐17) - Demo - Build your own chatbot matching your brand needs in minutes.
- @restpace/schema-form (⭐45) - Demo - Easily build complex forms automatically from a JSON Schema.
- react-darkreader (⭐277) - A React Hook for adding a dark / night mode to your site inspired by darkreader.
- react-apple-signin-auth (⭐100) - Apple signin for React using the official Apple JS SDK.
- react-mrz-scanner (⭐3) - 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 (⭐102) - demo - A calendar component that supports date, range & ranges picks.
- react-big-calendar (⭐7.5k) - Gcal/outlook like calendar component.
- react-datepicker (⭐7.9k) - A simple and reusable datepicker component for React.
- react-day-picker (⭐5.8k) - Flexible date picker for React.
- react-flatpickr (⭐594) - Flatpickr for React.
- react-simple-timefield (⭐96) - demo - Simple time input field.
- react-timezone-select (⭐204) - demo - Dynamic, succinct timezone select. Based on
react-select
. - DevExtreme React Scheduler - High-performance plugin-based scheduler/calendar for Material Design.
- jQWidgets Scheduler - Feature complete Scheduling library.
- react-calendar (⭐3.4k) - Ultimate calendar for your React app.
- react-date-picker (⭐1.2k) - A date picker for your React app.
- schedule-x (⭐906) - Material design event calendar and date picker components. Demo site: https://schedule-x.dev/
Emoji picker
- interweave-emoji-picker (⭐1.1k) - 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 (⭐2.6k) - Beautiful credit cards for your payment forms.
- react-payment-inputs (⭐337) - demo - A zero-dependency container to help with payment card input fields.
- react-input-mask (⭐2.2k) - demo - Yet another react component for input masking.
- @lunasec/react-sdk (⭐1.4k) - docs - Secure, hardened form components that encrypt/tokenize all data automatically.
- react-numpad (⭐136) - demo - Extensible number pad control for numbers, dates and times.
- react-multi-email (⭐286) - demo - Format multiple emails as the user types.
Autocomplete
Autosuggest / autocomplete / typeahead
- react-autosuggest (⭐6k) - WAI-ARIA compliant React autosuggest component.
- react-typeahead (⭐677) - Pure react-based typeahead and typeahead-tokenizer.
Select
- react-aria-menubutton (⭐456) - A fully accessible, easily themeable, React-powered menu button.
- react-functional-select (⭐193) - demo - Micro-sized & micro-optimized select component for React.js.
- react-mobile-picker (⭐278) - demo - An iOS like select box component.
- react-select (⭐27k) - A Select control built with and for React JS.
- react-column-select (⭐13) - A column select component built for react.
- react-select-search (⭐672) - demo - A lightweight select component for React
Color Picker
- coloreact (⭐89) - A tiny Color Picker for React.
- react-color (⭐238) - Is a tiny color picker widget component for React apps.
- react-colorful (⭐3k) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
- react-input-color (⭐243) - React input color component with hsv color picker.
Toggle
- @anatoliygatt/heart-switch (⭐440) - demo - A fully themeable and accessible heart-shaped toggle switch component.
- react-ios-switch (⭐128) - React switch component.
- react-toggle (⭐945) - An elegant, accessible toggle component for React. Also a glorified checkbox.
- ui-switch (⭐4) - The most complete Toggle component
Slider
- react-slider (⭐880) - Slider component for React.
Radio Button
- react-radio-group (⭐442) - Better radio buttons.
Type Select
Let the user select something (e.g. a tag) while typing
- react-autocomplete-input (⭐191) - Autocomplete input field for React.
- react-mentions (⭐2.4k) - Mention people in a textarea.
- rich-textarea (⭐283) - 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 (⭐1.5k) - A fantastically simple tagging component for your React projects.
- react-tagsinput (⭐1.3k) - A simple react component for inputing tags.
- react-tokeninput (⭐148) - Tokeninput component for React.
- tagify (⭐3.4k) - demo & docs - Lightweight, efficient Tags input component.
Autosize Input / Textarea
- react-input-autosize (⭐761) - Auto-resizing input field for React.
- react-autowidth-input (⭐11) - Highly configurable & extensible automatically sized input field built with hooks.
- react-textarea-autosize (⭐2.2k) - <textarea /> component for React which grows with content.
Star Rating
- react-rating (⭐300) - demo - Zero-dependency, highly customizable rating component.
- react-awesome-stars-rating (⭐28) - demo - The star rating component with accessibility.
- react-star-rating-input (⭐55) - React.js component for entering 0-5 (or more) stars.
Drag and Drop
- react-beautiful-dnd (⭐33k) - Beautiful and accessible drag and drop for lists with React
- react-dnd (⭐21k) - Drag and Drop for React.
- react-drag-sizing (⭐19) - "Drag to resize" (sizing) as React Component.
- react-draggable (⭐8.9k) - React draggable component.
- react-dragula (⭐992) - Drag and drop so simple it hurts.
- react-dropzone (⭐10k) - Simple HTML5 drag-drop zone with React.js.
- react-movable (⭐1.4k) - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
- react-sortable-pane (⭐647) - Sortable and resizable pane component for React.
- neodrag (⭐1.5k) - 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 (⭐459) - Sort any children with touch support and IE8 compatibility.
- sortablejs (⭐29k) - Lists reorderable by drag-and-drop, within and among lists.
Rich Text Editor
- alloyeditor (⭐1.4k) - WYSIWYG editor based on CKEditor with completely rewritten UI.
- ckeditor4-react (⭐94) - An official CKEditor 4 rich text editor wrapper.
- ckeditor5-react (⭐415) - An official CKEditor 5 rich text editor wrapper.
- draft-js (⭐23k) - A React framework for building text editors.
- edtr-io (⭐707) - demo - docs - WYSIWYG in-line web editor with plugins.
- megadraft (⭐1.2k) - Rich Text editor built on top of draft.js.
- react-ace (⭐4k) - Ace (Advanced Code Editor) wraper.
- react-codemirror (⭐1.5k) - demo - CodeMirror component for React.
- react-contenteditable (⭐1.6k) - React component for a div with editable contents.
- react-draft-wysiwyg (⭐6.4k) - WYSIWYG editor build on top of DraftJS.
- react-editor (⭐55) - Simple richtext editor that can insert images and HTML.
- react-medium-editor (⭐503) - medium-editor wrapper.
- react-monacoeditor (⭐284) - Monaco Editor component for React.
- react-simple-code-editor (⭐1.5k) - Simple no-frills code editor with syntax highlighting
- react-quill (⭐6.6k) - Quill wrapper.
- react-trumbowyg (⭐144) - Trumbowyg wrapper.
- remirror (⭐2.6k) - demo - docs - ProseMirror toolkit for React.
- slate (⭐29k) - demo - docs - A completely customizable framework for building rich text editors.
- smartblock (⭐307) - demo - docs - Block based WYSIWYG editor based on ProseMirror.
- tiptap (⭐24k) - demo - docs - The headless editor framework for web artisans.
Markdown Editor
- react-simplemde-editor (⭐761) - React component wrapper for EasyMDE (the most fresh SimpleMDE fork) (⭐2.3k).
- react-markdown-editor (⭐215) - A markdown editor using React/Reflux.
- react-md-editor (⭐2k) - A simple markdown editor with preview, implemented with React.js and TypeScript.
Image Editing
Image manipulation
- react-avatar-editor (⭐2.3k) - Facebook-like, avatar / profile picture component.
- react-avatar-generator (⭐67) - Generate fun kaleidoscope for user avatars.
- react-easy-crop (⭐53) - Component to crop/rotate images/videos with easy interactions. Touch friendly.
- react-image-crop (⭐3.8k) - A responsive image cropping tool for React.
- react-image-cropper (⭐175) - Image cropper.
- react-advanced-cropper (⭐607) - A react cropper library to create the cropper exactly suited for your website design.
- react-mobile-cropper (⭐20) - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on
react-advanced-cropper
.
Form Component Collections
- formsy-material-ui (⭐571) - A Formsy compatibility wrapper for Material UI form components.
- formsy-react-components (⭐288) - A set of React JS components for use in a formsy-react form.
- react-input-enhancements (⭐1.4k) - Set of enhancements for input control.
- react-widgets (⭐2.3k) - An à la carte set of polished, extensible, and accessible inputs.
Miscellaneous
- @anatoliygatt/numeric-stepper (⭐162) - demo - A fully themeable and accessible numeric stepper component.
- interweave (⭐1.1k) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
- react-designer (⭐1.9k) - Easy to configure, lightweight, editable vector graphics in your react components.
- react-upload-gallery (⭐76) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
Syntax Highlight
- react-syntax-highlighter (⭐3.9k) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.
UI Layout
Components to layout the app's UI
- autoresponsive-react (⭐1.6k) - Auto responsive grid layout library.
- golden-layout (⭐6.2k) - A multi-screen JavaScript Layout manager.
- hedron (⭐865) - A no-frills flexbox grid system, powered by styled-components.
- m-react-splitters (⭐160) - Splitter component, written in TypeScript.
- muuri-react (⭐346) - demo - docs - Responsive, sortable, filterable and draggable grid layouts.
- react-grid-layout (⭐20k) - A draggable and resizable grid layout with responsive breakpoints, for React.
- react-masonry-component (⭐1.4k) - Wrapper for @desandro's Masonry.
- react-reflex (⭐618) - Flex layout container component for advanced React web applications.
- react-spaces (⭐1.3k) - demo/docs - Nestable anchored, resizable, scrollable components.
- react-stonecutter (⭐1.2k) - Animated grid layout component.
- react-colrow (⭐6) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
- react-schematic (⭐5) - demo - Build responsive layouts using styled schematics without an overhead of any theme configuration
UI Animation
Animate transitions
- data-driven-motion (⭐541) - Easily animate your data.
- react-animatable (⭐38) - An animation library using Web Animations API.
- react-anime (⭐1.5k) - A super easy animation library.
- react-flip-move (⭐4k) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
- react-gsap-enhancer (⭐723) - Use the full power of React and GSAP together.
- react-tsparticles (⭐7.2k) - A lightweight component to easily create interactive particles animations
- react-motion (⭐22k) - A spring that solves your animation problems.
- react-mt-svg-lines (⭐360) - Wrapper to animate the line stroke in SVGs.
- react-router-transition (⭐2.6k) - Transitions built for react-router, powered by react-motion.
- react-spring (⭐28k) - A spring physics based animation library.
- react-ts-typewriter (⭐35) - demo - Easy to use and customizable typewriter effect for any text.
- framer-motion (⭐23k) - An animation and gesture library.
- react-spark-scroll (⭐357) - Scroll-based actions and animations for react.
- react-track (⭐339) - Track the position of DOM elements. Create cool animations.
- react-transitive-number (⭐210) - Apply transition effect to numeric strings, a la old Groupon timers.
- react-web-animation (⭐298) - React components for the Web Animations API -.
- auto-size-transition (⭐9) - A component that scale dynamically according to the internal children size
- react-particles-bg (⭐636) - Particles backgrounds.
- gooey-react (⭐644) - demo/docs - The gooey effect for React, used for shape blobbing / metaballs.
- react-voodoo (⭐14) - demo/samples (⭐3) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc
Parallax
- simple-parallax-js (⭐1.7k) - demo - The easiest way to get a parallax effect with React and JavaScript on images
- react-parallax-tilt (⭐928) - demo - Easily apply parallax tilt hover effect on components.
UI Frameworks
Responsive
Set of components + responsive layout system
- AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
- ant-design (⭐91k) - demo/docs - A UI Design Language from China. Individual components available.
- atlaskit - Atlassian's official UI library, with components from badge to tree table.
- base web - Base Web is a foundation for initiating, evolving, and unifying web products.
- carbon (⭐7.6k) - demo/docs - A design system built by IBM.
- cdbreact (⭐50) - demo - docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
- chakra-ui (⭐37k) - demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
- ChatUI (⭐2.5k) - demo/docs - The UI design language and React library for Conversational UI
- CoreUI for React (⭐654) - demo/docs - Open Source UI components library.
- evergreen (⭐12k) - demo/docs - Evergreen React UI Framework by Segment.
- fluentui (⭐18k) - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
- geist-ui (⭐4.3k) - Modern and minimalist React UI library.
- gestalt (⭐4.2k) - demo/docs - A set of components that supports Pinterest’s design language.
- grommet (⭐8.3k) - The most advanced UX framework for enterprise applications.
- Mantine (⭐25k) - demo/docs - A fully featured library with 100+ hooks and components with native dark theme support
- orbit (⭐1.4k) - Components for building travel oriented projects.
- flowbite-react (⭐1.8k) - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
- primereact (⭐6.1k) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
- radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
- react-bootstrap (⭐22k) - Bootstrap components built with React.
- react-foundation (⭐602) - Foundation as React components.
- reakit (⭐7.7k) - demo/docs Toolkit for building accessible rich web apps
- searchkit (⭐4.7k) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- semantic-ui-react (⭐13k) - The official Semantic-UI-React integration.
- semi-design (⭐8k) - demo/docs - A modern, comprehensive, flexible design system.
- shadcn/ui (⭐62k) - demo - docs - Beautifully designed components that you can copy and paste into your apps.
- shineout (⭐915) - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
Material Design
- 🚀 Material UI (⭐92k) - Full suite of components. Build your own design system, or start with Material Design.
- Autocomplete - Accessible autocomplete, combobox, multiselect
- Material Icons - 1,000+ SVG material icons.
- Modal - Accessible modal dialog component.
- Slider - Accessible slider component.
- Table - table with sorting, selecting, pagination, virtualized.
- Tree View - Accessible tree view component for React.
- react-essence (⭐417) - Essence - The Essential Material Design Framework.
- react-materialize (⭐1.4k) - Material design for react, powered by materializecss.
- react-toolbox (⭐8.7k) - A set of React components implementing Google's Material Design.
- mdbootstrap (⭐1.4k) - React Bootstrap with Material Design
Mobile
- antd-mobile (⭐11k) - Configurable Mobile UI from China.
- Ionic React - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
- OnsenUI (⭐8.8k) - demo/docs - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.
Component Collections
- blueprint (⭐20k) - demo - docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
- dataminr-react-components - Collection of reusable React Components and utility functions.
- shards-react (⭐755) - docs/demo - A beautiful and modern React design system. Freemium.
- aframe-react (⭐1.4k) - Build virtual reality experiences with A-Frame and React.
- react-admin (⭐24k) - Build admin user experiences on top of REST and GraphQL services.
- refine (⭐26k) - demo - docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
- matrix-card (⭐24) - demo - Simplest possible component to generate matrix rain style cards.
- rsuite (⭐8.2k) - demo/docs - Suite of components for "enterprise system products".
- lens-ui (⭐7) - docs (⭐7) - A Suit of components focused on simplicity.
UI Utilities
Reporter
Report computed styles
Visibility Reporter
Report when a component becomes visible/hidden
- react-intersection-observer (⭐4.9k) - React implementation of the Intersection Observer API.
- react-visibility-sensor (⭐2.3k) - Sensor component.
- react-waypoint (⭐4.1k) - 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 (⭐183) - Provide props to your Components based on their Width and/or Height.
- react-container-dimensions (⭐231) - Wrapper component that detects element resize.
- react-dimensions (⭐454) - React higher-order component to get dimensions of container.
- react-height (⭐180) - Component-wrapper to determine and report children elements height.
- react-measure (⭐1.9k) - Compute measurements of a React component.
- react-sizeme (⭐1.9k) - Make your React Components aware of their width and height.
Device Input
Turn user input into actions
Keyboard Events
- react-hotkeys (⭐2.1k) - Declarative hotkey and focus area management for React.
- react-key-handler (⭐388) - React component to handle keyboard events.
- react-keydown (⭐501) - Lightweight keydown wrapper for React components.
- react-shortcuts (⭐328) - Manage keyboard shortcuts from one place.
- useKeyCapture (⭐24) - A custom hook to ease the key-press listeners of a target/global.
- react-keyboard-navigator (⭐26) - A suite of React components and hook for selecting sibling components through the keyboard.
Scroll Events
- react-scroll-components (⭐123) - A set of components that react to page scrolling.
Touch Swipe
- react-swipe (⭐1.7k) - Swipe.js as a React component.
Mouse Events
- react-hook-mighty-mouse (⭐118) - demo - Hook that tracks mouse events on selected element.
Meta Tags
Set meta tags, , children of <head></em></p> <ul> <li><a href="https://github.com/staylor/react-helmet-async#readme" title="null" rel="noopener noreferrer">react-helmet-async (⭐2k)</a> - Thread-safe Helmet for React 16+ and friends</li> <li><a href="https://github.com/nfl/react-helmet" title="null" rel="noopener noreferrer">react-helmet (⭐17k)</a> - A document head manager for React.</li> </ul> <h3 id="portal"><a class="anchor" aria-hidden="true" tabindex="-1" href="#portal"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Portal</h3><p><em>Render an element at an arbitrary DOM node</em></p> <ul> <li><a href="https://github.com/fckt/react-layer-stack" title="null" rel="noopener noreferrer">react-layer-stack (⭐160)</a> - Simple but ubiquitously powerful and agnostic layering system for React.</li> <li><a href="https://github.com/tajo/react-portal" title="null" rel="noopener noreferrer">react-portal (⭐2.1k)</a> - React component for transportation of modals, lightboxes, loading bars... to document.body.</li> </ul> <h3 id="test-user-behavior"><a class="anchor" aria-hidden="true" tabindex="-1" href="#test-user-behavior"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Test User Behavior</h3><p><em>A/B tests, experiments, ...</em></p> <ul> <li><a href="https://github.com/HubSpot/react-experiments" title="null" rel="noopener noreferrer">react-experiments (⭐319)</a> - React components for implementing UI experiments.</li> </ul> <h2 id="code-design"><a class="anchor" aria-hidden="true" tabindex="-1" href="#code-design"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Code Design</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <p><em>Libraries that help with code design</em></p> <h3 id="data-store"><a class="anchor" aria-hidden="true" tabindex="-1" href="#data-store"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Data Store</h3><p><em>Data flow / data management / data stores / components state / data flow</em></p> <ul> <li><a href="https://github.com/Yomguithereal/baobab-react" title="null" rel="noopener noreferrer">baobab-react (⭐310)</a> - React integration for Baobab.</li> <li><a href="https://github.com/cerebral/cerebral" title="null" rel="noopener noreferrer">cerebral (⭐2k)</a> - A state controller with its own debugger.</li> <li><a href="https://github.com/effector/effector" title="null" rel="noopener noreferrer">effector-react (⭐4.5k)</a> - React bindings for effector, an effective multi-store state manager.</li> <li><a href="https://github.com/fireproof-storage/fireproof" title="null" rel="noopener noreferrer">fireproof (⭐213)</a> - <a href="https://fireproof.storage/try-free/" title="null" rel="noopener noreferrer">demo</a> - <a href="https://use-fireproof.com/docs/welcome" title="null" rel="noopener noreferrer">docs</a> Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend</li> <li><a href="https://rxdb.info/" title="null" rel="noopener noreferrer">RxDB</a> - <a href="https://github.com/pubkey/rxdb/tree/master/examples/react" title="null" rel="noopener noreferrer">demo (⭐21k)</a> - <a href="https://rxdb.info/quickstart.html" title="null" rel="noopener noreferrer">docs</a> A fast, local first, reactive Database for JavaScript Applications</li> <li><a href="https://github.com/yahoo/fluxible" title="null" rel="noopener noreferrer">fluxible (⭐1.8k)</a> - A pluggable container for universal flux applications.</li> <li><a href="https://github.com/mariusandra/kea" title="null" rel="noopener noreferrer">kea (⭐1.9k)</a> - High level architecture for React apps.</li> <li><a href="https://github.com/yahoo/react-i13n" title="null" rel="noopener noreferrer">react-i13n (⭐383)</a> - A performant, scalable and pluggable approach to instrumenting your React application.</li> <li><a href="https://github.com/reactjs/react-redux" title="null" rel="noopener noreferrer">react-redux (⭐23k)</a> - Official React bindings for Redux.</li> <li><a href="https://github.com/tshelburne/redux-batched-actions" title="null" rel="noopener noreferrer">redux-batched-actions (⭐1k)</a> - Reducer + action to reduce actions under a single subscriber notification.</li> <li><a href="https://github.com/reactjs/redux" title="null" rel="noopener noreferrer">redux (⭐61k)</a> - Predictable state container for JavaScript apps.</li> <li><a href="https://github.com/reactjs/reselect" title="null" rel="noopener noreferrer">reselect (⭐19k)</a> - Selector library for Redux.</li> <li><a href="https://github.com/SiftScience/resourcerer" title="null" rel="noopener noreferrer">resourcerer (⭐80)</a> - Declarative data-fetching framework for REST APIs</li> <li><a href="https://github.com/lukasbach/synergies" title="null" rel="noopener noreferrer">synergies (⭐10)</a> - <a href="https://synergies.js.org" title="null" rel="noopener noreferrer">docs</a> A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.</li> <li><a href="https://zustand.surge.sh/" title="null" rel="noopener noreferrer">zustand</a> - <a href="https://github.com/pmndrs/zustand" title="null" rel="noopener noreferrer">docs (⭐44k)</a> - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.</li> <li><a href="https://github.com/teafuljs/teaful" title="null" rel="noopener noreferrer">teaful (⭐707)</a> - Tiny, easy and powerful React state management</li> </ul> <h3 id="form-logic"><a class="anchor" aria-hidden="true" tabindex="-1" href="#form-logic"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Form Logic</h3><ul> <li><a href="https://github.com/data-driven-forms/react-forms" title="null" rel="noopener noreferrer">data-driven-forms (⭐291)</a> - A declarative way for building forms with all the functionality.</li> <li><a href="https://github.com/jaredpalmer/formik" title="null" rel="noopener noreferrer">formik (⭐34k)</a> - Build forms without tears and supports Validation in ease.</li> <li><a href="https://github.com/formsy/formsy-react/" title="null" rel="noopener noreferrer">formsy-react (⭐762)</a> - A form input builder and validator for React JS.</li> <li><a href="https://github.com/phormal/phormal" title="null" rel="noopener noreferrer">Phormal (⭐3)</a> - <a href="https://phormal.dev/getting-started/react" title="null" rel="noopener noreferrer">Docs & Demos</a> - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.</li> <li><a href="https://github.com/react-hook-form/react-hook-form" title="null" rel="noopener noreferrer">react-hook-form (⭐40k)</a> - React hooks for form validation without the hassle.</li> <li><a href="https://github.com/mozilla-services/react-jsonschema-form" title="null" rel="noopener noreferrer">react-jsonschema-form (⭐14k)</a> - A React component for building Web forms from JSONSchema.</li> <li><a href="https://github.com/0529bill/react-client-validation" title="null" rel="noopener noreferrer">react-client-validation (⭐4)</a> - Simple and super lightweight validation for React.</li> <li><a href="https://github.com/final-form/react-final-form" title="null" rel="noopener noreferrer">react-final-form (⭐7.3k)</a> - Subscription-based form state management</li> <li><a href="https://github.com/MAKARD/react-formawesome" title="null" rel="noopener noreferrer">react-formawesome (⭐6)</a> - Complex library for creating awesome forms.</li> <li><a href="https://github.com/surveyjs/survey-library" title="null" rel="noopener noreferrer">surveyjs (⭐4k)</a> - The advanced Survey and Form library</li> <li><a href="https://github.com/alibaba/formily" title="null" rel="noopener noreferrer">Formily (⭐11k)</a> - High performance, extensible, and Typescript friendly</li> <li><a href="https://github.com/luoanb/hook-form-react" title="null" rel="noopener noreferrer">hook-form-react (⭐3)</a> - <a href="https://luoanb.github.io/hook-form-react" title="null" rel="noopener noreferrer">docs</a> - A lightweight, dependency-free solution React hooks for form validation.</li> </ul> <h3 id="router"><a class="anchor" aria-hidden="true" tabindex="-1" href="#router"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Router</h3><ul> <li><a href="https://github.com/STRML/react-router-component" title="null" rel="noopener noreferrer">react-router-component (⭐874)</a> - Declarative router component for React.</li> <li><a href="https://github.com/taion/react-router-scroll" title="null" rel="noopener noreferrer">react-router-scroll (⭐840)</a> - React Router scroll management.</li> <li><a href="https://github.com/reactjs/react-router" title="null" rel="noopener noreferrer">react-router (⭐52k)</a> - A complete routing library for React.</li> <li><a href="https://github.com/salvoravida/redux-first-history" title="null" rel="noopener noreferrer">redux-first-history (⭐440)</a> - Redux First History - Redux history binding support react-router - @reach/router - wouter</li> <li><a href="https://github.com/kriasoft/universal-router" title="null" rel="noopener noreferrer">universal-router (⭐1.7k)</a> - A simple middleware-style router for isomorphic JavaScript web apps.</li> <li><a href="https://github.com/molefrog/wouter" title="null" rel="noopener noreferrer">wouter (⭐6.3k)</a> - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.</li> <li><a href="https://github.com/TanStack/router" title="null" rel="noopener noreferrer">tanstack-router (⭐7.3k)</a> - Type-safe router with built-in caching & URL state management</li> </ul> <h3 id="props-from-server"><a class="anchor" aria-hidden="true" tabindex="-1" href="#props-from-server"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Props from server</h3><p><em>Component properties asynchronously fetched over the network</em></p> <ul> <li><a href="https://github.com/heroku/react-refetch" title="null" rel="noopener noreferrer">react-refetch (⭐3.4k)</a> - A simple, declarative, and composable way to fetch data for React components.</li> <li><a href="https://github.com/makeomatic/redux-connect" title="null" rel="noopener noreferrer">redux-connect (⭐550)</a> - Provides decorator for resolving async props in react-router.</li> <li><a href="https://github.com/soroushchehresa/axios-react" title="null" rel="noopener noreferrer">axios-react (⭐46)</a> - HTTP client component for React.</li> </ul> <h3 id="communication-with-server"><a class="anchor" aria-hidden="true" tabindex="-1" href="#communication-with-server"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Communication with server</h3><ul> <li><a href="https://github.com/apollostack/apollo-client" title="null" rel="noopener noreferrer">apollo-client (⭐19k)</a> - A simple caching client for any GraphQL server and UI framework.</li> <li><a href="https://github.com/facebook/relay" title="null" rel="noopener noreferrer">react-relay (⭐18k)</a> - Relay is a JavaScript framework for building data-driven React applications.</li> <li><a href="https://github.com/TanStack/query" title="null" rel="noopener noreferrer">query (⭐41k)</a> - <a href="https://tanstack.com/query/v4" title="null" rel="noopener noreferrer">docs</a> Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.</li> </ul> <h3 id="css--style"><a class="anchor" aria-hidden="true" tabindex="-1" href="#css--style"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>CSS / Style</h3><ul> <li><a href="https://github.com/milesj/aesthetic" title="null" rel="noopener noreferrer">aesthetic (⭐203)</a> - 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.</li> <li><a href="https://github.com/Khan/aphrodite" title="null" rel="noopener noreferrer">aphrodite (⭐5.3k)</a> - It's inline styles, but they work!.</li> <li><a href="https://github.com/rofrischmann/inline-style-prefixer" title="null" rel="noopener noreferrer">inline-style-prefixer (⭐392)</a> - Run-time Autoprefixer for Inline Style Objects.</li> <li><a href="https://github.com/d6u/react-container-query" title="null" rel="noopener noreferrer">react-container-query (⭐887)</a> - Modular responsive component.</li> <li><a href="https://github.com/contra/react-responsive" title="null" rel="noopener noreferrer">react-responsive (⭐7k)</a> - Media queries in react for responsive design.</li> <li><a href="https://github.com/jmlweb/reactponsive" title="null" rel="noopener noreferrer">reactponsive (⭐14)</a> - Responsive components and hooks.</li> <li><a href="https://github.com/styled-components/styled-components" title="null" rel="noopener noreferrer">styled-components (⭐40k)</a> - Visual primitives for the component age.</li> <li><a href="https://github.com/stitchesjs/stitches" title="null" rel="noopener noreferrer">stitches (⭐7.7k)</a> - CSS-in-JS with near-zero runtime, SSR, multi-variant support.</li> </ul> <h3 id="html-template"><a class="anchor" aria-hidden="true" tabindex="-1" href="#html-template"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>HTML Template</h3><ul> <li><a href="https://github.com/AlexGilleran/jsx-control-statements" title="null" rel="noopener noreferrer">jsx-control-statements (⭐1.6k)</a> - Neater If and For for React JSX.</li> </ul> <h3 id="isomorphic-apps"><a class="anchor" aria-hidden="true" tabindex="-1" href="#isomorphic-apps"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Isomorphic Apps</h3><ul> <li><a href="https://github.com/airbnb/hypernova" title="null" rel="noopener noreferrer">hypernova (⭐5.8k)</a> - A service for server-side rendering your JavaScript views.</li> <li><a href="https://github.com/kriasoft/isomorphic-style-loader" title="null" rel="noopener noreferrer">isomorphic-style-loader (⭐1.3k)</a> - Isomorphic CSS style loader for Webpack.</li> <li><a href="https://github.com/redfin/react-server" title="null" rel="noopener noreferrer">react-server (⭐3.9k)</a> - React framework with server render for blazing fast page load.</li> <li><a href="https://github.com/rill-js/rill" title="null" rel="noopener noreferrer">rill (⭐611)</a> - Universal web application framework.</li> <li><a href="https://github.com/halt-hammerzeit/webpack-isomorphic-tools" title="null" rel="noopener noreferrer">webpack-isomorphic-tools (⭐1.3k)</a> - Server-side rendering for your Webpack-built applications (e.g. React).</li> </ul> <h3 id="boilerplate"><a class="anchor" aria-hidden="true" tabindex="-1" href="#boilerplate"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Boilerplate</h3><p><em>Scaffold / starter kit / Yeoman generator / stack ensemble / seed</em></p> <ul> <li><a href="https://github.com/facebookincubator/create-react-app" title="null" rel="noopener noreferrer">create-react-app (⭐102k)</a> - Create React apps with no build configuration.</li> <li><a href="https://github.com/winwiz1/crisp-react" title="null" rel="noopener noreferrer">crisp-react (⭐185)</a> - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.</li> <li><a href="https://github.com/Nilanth/cra-template-redux-auth-starter" title="null" rel="noopener noreferrer">cra-template-redux-auth-starter (⭐37)</a> - A Redux auth starter boilerplate for CRA.</li> <li><a href="https://github.com/chentsulin/electron-react-boilerplate" title="null" rel="noopener noreferrer">electron-react-boilerplate (⭐23k)</a> - Live editing development on desktop app.</li> <li><a href="https://github.com/elegantframework/elegant-cli" title="null" rel="noopener noreferrer">elegant (⭐157)</a> - <a href="https://www.elegantframework.com/docs/installation" title="null" rel="noopener noreferrer">docs</a> - <a href="https://www.elegantframework.com/" title="null" rel="noopener noreferrer">demo</a> - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.</li> <li><a href="https://github.com/brocoders/extensive-react-boilerplate" title="null" rel="noopener noreferrer">extensive-react-boilerplate (⭐206)</a> - 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.</li> <li><a href="https://github.com/FredericHeem/starhackit" title="null" rel="noopener noreferrer">generator-starhackit (⭐1.3k)</a> - Full-stack starter kit.</li> <li><a href="https://github.com/insin/nwb" title="null" rel="noopener noreferrer">nwb (⭐5.6k)</a> - CLI tool and devDependency for React apps & components and npm modules.</li> <li><a href="https://nx.dev" title="null" rel="noopener noreferrer">nx</a> - Next generation build system with first class monorepo support and powerful integrations.</li> <li><a href="https://github.com/moishinetzer/pbandj" title="null" rel="noopener noreferrer">PBandJ (⭐108)</a> - Zero-Config Reusable Component Framework.</li> <li><a href="https://github.com/gaearon/react-hot-boilerplate" title="null" rel="noopener noreferrer">react-hot-boilerplate (⭐3.9k)</a> - Minimal live-editing boilerplate for your next ReactJS project.</li> <li><a href="https://github.com/AlexSergey/rockpack" title="null" rel="noopener noreferrer">rockpack (⭐570)</a> - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.</li> <li><a href="https://github.com/andrelmlins/create-react-dependency" title="null" rel="noopener noreferrer">create-react-dependency (⭐25)</a> - Create react dependencies with no build configuration.</li> <li><a href="https://github.com/Sazito/phoenix" title="null" rel="noopener noreferrer">phoenix (⭐160)</a> - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.</li> <li><a href="https://github.com/anandgupta193/react-enterprise-starter-kit" title="null" rel="noopener noreferrer">react-enterprise-starter-kit (⭐88)</a> - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.</li> </ul> <h3 id="miscellaneous-2"><a class="anchor" aria-hidden="true" tabindex="-1" href="#miscellaneous-2"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Miscellaneous</h3><ul> <li><a href="https://github.com/matthewwithanm/react-inlinesvg" title="null" rel="noopener noreferrer">react-inlinesvg (⭐1.3k)</a> - An SVG loader component for ReactJS.</li> <li><a href="https://github.com/kapolos/react-godfather" title="null" rel="noopener noreferrer">react-godfather (⭐27)</a> - A new way to write Functional Components, without Hooks.</li> <li><a href="https://github.com/lynndylanhurley/redux-auth" title="null" rel="noopener noreferrer">redux-auth-patch (⭐2.1k)</a> - Complete token authentication system for react + redux that supports isomorphic rendering.</li> <li><a href="https://github.com/treasure-data/redux-search" title="null" rel="noopener noreferrer">redux-search (⭐1.4k)</a> - Redux bindings for client-side search.</li> <li><a href="https://github.com/gcanti/tcomb-react" title="null" rel="noopener noreferrer">tcomb-react (⭐202)</a> - Alternative syntax for PropTypes.</li> <li><a href="https://github.com/salvoravida/react-universal-hooks" title="null" rel="noopener noreferrer">react-universal-hooks (⭐187)</a> - 🎉 support react hooks everywhere (Functional or Class Component).</li> </ul> <h2 id="utilities"><a class="anchor" aria-hidden="true" tabindex="-1" href="#utilities"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Utilities</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <ul> <li><a href="https://github.com/zpao/qrcode.react" title="null" rel="noopener noreferrer">qrcode.react (⭐3.7k)</a> - A <QRCode/> component for use with React.</li> <li><a href="https://github.com/bitjson/qr-code" title="null" rel="noopener noreferrer"><code><qr-code></code></a> – A no-dependencies, customizable, animate-able, SVG-based <code><qr-code></code> element.</li> <li><a href="https://github.com/fernandopasik/react-children-utilities" title="null" rel="noopener noreferrer">react-children-utilities (⭐343)</a> - Extended utils for React.Children.</li> <li><a href="https://github.com/ReactTraining/react-media" title="null" rel="noopener noreferrer">react-media (⭐2.4k)</a> - A CSS media query component for React.</li> <li><a href="https://github.com/bluepeter/react-middle-ellipsis" title="null" rel="noopener noreferrer">react-middle-ellipsis (⭐61)</a> - <a href="https://bluepeter.github.io/react-middle-ellipsis/" title="null" rel="noopener noreferrer">demo</a> - Truncate long strings in the middle instead of the end.</li> <li><a href="https://github.com/martinandert/react-translate-component" title="null" rel="noopener noreferrer">react-translate-component (⭐321)</a> - Multi-lingual/localized text content.</li> </ul> <h3 id="i18n"><a class="anchor" aria-hidden="true" tabindex="-1" href="#i18n"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>i18n</h3><p><em>Internationalization / L10n / localization / translation</em></p> <ul> <li><a href="https://github.com/i18next/react-i18next" title="null" rel="noopener noreferrer">react-i18next (⭐9k)</a> - Internationalization for react done right. Using the i18next i18n ecosystem.</li> <li><a href="https://github.com/yahoo/react-intl" title="null" rel="noopener noreferrer">react-intl (⭐14k)</a> - Internationalize React apps.</li> <li><a href="https://github.com/fakundo/react-localized" title="null" rel="noopener noreferrer">react-localized (⭐9)</a> - Internationalization for React components based on <code>gettext</code> format.</li> <li><a href="https://github.com/CherryProjects/react-translate-maker" title="null" rel="noopener noreferrer">react-translate-maker (⭐35)</a> - Universal internationalization (i18n) open source library for React.</li> <li><a href="https://github.com/alibaba/react-intl-universal" title="null" rel="noopener noreferrer">react-intl-universal (⭐1.3k)</a> - <a href="https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html" title="null" rel="noopener noreferrer">demo</a> Internationalize React apps. Not only for React.Component but also for Vanilla JS.</li> <li><a href="https://github.com/tolgee/tolgee-js/tree/main/packages/react" title="null" rel="noopener noreferrer">@tolgee/react (⭐220)</a> - <a href="https://tolgee.io/docs/web/using_with_react/installation" title="null" rel="noopener noreferrer">docs</a> – Web-based localization tool enabling users to translate directly in the React app they develop</li> <li><a href="https://github.com/lingui/js-lingui" title="null" rel="noopener noreferrer">js-lingui (⭐4.3k)</a> - <a href="https://lingui.js.org" title="null" rel="noopener noreferrer">docs</a> – A readable, automated, and optimized (5 kb) internationalization for JavaScript.</li> </ul> <h3 id="framework-bindings--integrations"><a class="anchor" aria-hidden="true" tabindex="-1" href="#framework-bindings--integrations"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Framework bindings / integrations</h3><ul> <li><a href="https://github.com/magalhas/backbone-react-component" title="null" rel="noopener noreferrer">backbone-react-component (⭐810)</a> - A bit of nifty glue that automatically plugs your Backbone models.</li> <li><a href="https://github.com/KtorZ/elm-react-component" title="null" rel="noopener noreferrer">elm-react-component (⭐113)</a> - A React component which wraps an Elm module to be used in a React application.</li> <li><a href="https://github.com/ProjectSeptemberInc/gl-react" title="null" rel="noopener noreferrer">gl-react (⭐265)</a> - OpenGL / WebGL bindings for React to implement complex effects over images and content.</li> <li><a href="https://github.com/jhudson8/react-backbone" title="null" rel="noopener noreferrer">react-backbone (⭐132)</a> - Backbone-aware mixins for react and a whole lot more.</li> <li><a href="https://github.com/react-d3-library/react-d3-library" title="null" rel="noopener noreferrer">react-d3-library (⭐1.5k)</a> - Open source library for using D3 in React.</li> <li><a href="https://github.com/evancz/react-elm-components" title="null" rel="noopener noreferrer">react-elm-components (⭐777)</a> - Write React components in Elm.</li> <li><a href="https://github.com/pilwon/react-famous" title="null" rel="noopener noreferrer">react-famous (⭐172)</a> - React bridge to Famo.us.</li> <li><a href="https://github.com/STRML/react-localstorage" title="null" rel="noopener noreferrer">react-localstorage (⭐288)</a> - Simple componentized localstorage implementation for Facebook's React.</li> <li><a href="https://github.com/mifi/react-lottie-player" title="null" rel="noopener noreferrer">react-lottie-player (⭐481)</a> - <a href="https://mifi.github.io/react-lottie-player/" title="null" rel="noopener noreferrer">demo</a> - Declarative lottie animation player.</li> <li><a href="https://github.com/shakacode/react_on_rails" title="null" rel="noopener noreferrer">react-on-rails (⭐5.1k)</a> - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.</li> <li><a href="https://github.com/toxicFork/react-three-renderer" title="null" rel="noopener noreferrer">react-three-renderer (⭐1.5k)</a> - Render into a three.js canvas using React.</li> <li><a href="https://github.com/fritx/react-threejs" title="null" rel="noopener noreferrer">react-threejs (⭐81)</a> - Simplest bindings between React & Three.js</li> <li><a href="https://github.com/firebase/reactfire" title="null" rel="noopener noreferrer">reactfire (⭐3.5k)</a> - ReactJS mixin for easy Firebase integration.</li> <li><a href="https://github.com/PixelsCommander/ReactiveElements" title="null" rel="noopener noreferrer">reactive-elements (⭐696)</a> - Allows to use React.js component as HTML element (web component).</li> <li><a href="https://github.com/elraccoone/react-unity-webgl" title="null" rel="noopener noreferrer">react-unity-webgl (⭐1.7k)</a> - Unity intergration with two-way communication using a built-in Event System.</li> </ul> <h3 id="integrations-with-third-party-services"><a class="anchor" aria-hidden="true" tabindex="-1" href="#integrations-with-third-party-services"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Integrations with Third Party Services</h3><ul> <li><a href="https://github.com/react-ga/react-ga" title="null" rel="noopener noreferrer">react-ga (⭐5.1k)</a> - React Google Analytics Module.</li> <li><a href="https://github.com/hzdg/react-google-analytics" title="null" rel="noopener noreferrer">react-google-analytics (⭐111)</a> - Google analytics component.</li> <li><a href="https://github.com/ErrorPro/react-google-autocomplete" title="null" rel="noopener noreferrer">react-google-autocomplete (⭐457)</a> - Google Places API components and hooks.</li> <li><a href="https://github.com/appleboy/react-recaptcha" title="null" rel="noopener noreferrer">react-recaptcha (⭐632)</a> - A react.js reCAPTCHA for Google.</li> <li><a href="https://github.com/azmenak/react-stripe-checkout" title="null" rel="noopener noreferrer">react-stripe-checkout (⭐979)</a> - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.</li> <li><a href="https://github.com/rangle/redux-segment" title="null" rel="noopener noreferrer">redux-segment</a> - Segment.io analytics integration for redux.</li> <li><a href="https://github.com/Nilanth/react-slack-notification" title="null" rel="noopener noreferrer">react-slack-notification (⭐15)</a> - Send messages and error logs to a Slack channel directly.</li> <li><a href="https://github.com/csfrequency/react-firebase-hooks" title="null" rel="noopener noreferrer">react-firebase-hooks (⭐3.5k)</a> - Hooks to integrate firebase in your application.</li> </ul> <h2 id="performance"><a class="anchor" aria-hidden="true" tabindex="-1" href="#performance"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Performance</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <h3 id="ui"><a class="anchor" aria-hidden="true" tabindex="-1" href="#ui"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>UI</h3><ul> <li><a href="https://github.com/trueadm/inferno" title="null" rel="noopener noreferrer">inferno (⭐16k)</a> - An extremely fast, React-like JavaScript library for building modern user interfaces.</li> <li><a href="https://github.com/JakeSidSmith/react-fastclick" title="null" rel="noopener noreferrer">react-fastclick (⭐486)</a> - Fast Touch Events for React.</li> <li><a href="https://github.com/reactjs/react-static-container" title="null" rel="noopener noreferrer">react-static-container (⭐222)</a> - Renders static content efficiently.</li> </ul> <h4 id="inspect"><a class="anchor" aria-hidden="true" tabindex="-1" href="#inspect"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Inspect</h4><ul> <li><a href="https://github.com/RamonGebben/react-perf-tool" title="null" rel="noopener noreferrer">react-perf-tool (⭐413)</a> - Debug performance of your React application.</li> <li><a href="https://github.com/redsunsoft/react-render-visualizer" title="null" rel="noopener noreferrer">react-render-visualizer (⭐836)</a> - Render visualizer for ReactJS.</li> </ul> <h4 id="lazy-load"><a class="anchor" aria-hidden="true" tabindex="-1" href="#lazy-load"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Lazy Load</h4><ul> <li><a href="https://github.com/ggordan/react-infinite-grid" title="null" rel="noopener noreferrer">react-infinite-grid (⭐203)</a> - A React component which renders a grid of elements.</li> <li><a href="https://github.com/seatgeek/react-infinite" title="null" rel="noopener noreferrer">react-infinite (⭐2.7k)</a> - A browser-ready efficient scrolling container based on UITableView.</li> <li><a href="https://github.com/loktar00/react-lazy-load" title="null" rel="noopener noreferrer">react-lazy-load (⭐976)</a> - React component that renders children elements when they enter the viewport.</li> <li><a href="https://github.com/jasonslyvia/react-lazyload" title="null" rel="noopener noreferrer">react-lazyload (⭐5.8k)</a> - Lazyload your Component, Image or anything matters the performance.</li> <li><a href="https://github.com/bvaughn/react-virtualized" title="null" rel="noopener noreferrer">react-virtualized (⭐26k)</a> - React components for efficiently rendering large lists and tabular data.</li> </ul> <h3 id="app-size"><a class="anchor" aria-hidden="true" tabindex="-1" href="#app-size"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>App Size</h3><ul> <li><a href="https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types" title="null" rel="noopener noreferrer">babel-plugin-transform-react-remove-prop-types (⭐898)</a> - Remove unnecessary React propTypes.</li> <li><a href="https://github.com/Lucifier129/react-lite" title="null" rel="noopener noreferrer">react-lite (⭐1.7k)</a> - An implementation of React that optimizes for small script size.</li> </ul> <h3 id="server-side-rendering"><a class="anchor" aria-hidden="true" tabindex="-1" href="#server-side-rendering"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Server-Side Rendering</h3><ul> <li><a href="https://github.com/AlexSergey/issr" title="null" rel="noopener noreferrer">iSSR (⭐104)</a> - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.</li> <li><a href="https://github.com/dunglas/react-esi" title="null" rel="noopener noreferrer">react-esi (⭐673)</a> - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments</li> </ul> <h2 id="dev-tools"><a class="anchor" aria-hidden="true" tabindex="-1" href="#dev-tools"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Dev Tools</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <h3 id="test"><a class="anchor" aria-hidden="true" tabindex="-1" href="#test"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Test</h3><ul> <li><a href="https://github.com/producthunt/chai-enzyme" title="null" rel="noopener noreferrer">chai-enzyme (⭐787)</a> - Chai.js assertions and convenience functions for testing React Components with enzyme.</li> <li><a href="https://github.com/airbnb/enzyme" title="null" rel="noopener noreferrer">enzyme (⭐20k)</a> - JavaScript Testing utilities for React.</li> <li><a href="https://github.com/facebook/jest" title="null" rel="noopener noreferrer">jest-cli (⭐44k)</a> - Painless JavaScript Testing.</li> <li><a href="https://github.com/pzavolinsky/react-unit" title="null" rel="noopener noreferrer">react-unit (⭐194)</a> - Lightweight unit test library for ReactJS.</li> <li><a href="https://github.com/conorhastings/redux-test-recorder" title="null" rel="noopener noreferrer">redux-test-recorder (⭐496)</a> - A redux middleware to automatically generate tests for reducers through ui interaction.</li> <li><a href="https://github.com/milesj/rut" title="null" rel="noopener noreferrer">rut (⭐16)</a> - React testing made easy with <code>react-test-renderer</code>. Supports DOM and custom renderers.</li> <li><a href="https://github.com/bruderstein/unexpected-react" title="null" rel="noopener noreferrer">unexpected-react (⭐187)</a> - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.</li> <li><a href="https://github.com/microsoft/playwright" title="null" rel="noopener noreferrer">playwright (⭐63k)</a> enables reliable end-to-end testing for modern web apps.</li> </ul> <h3 id="redux"><a class="anchor" aria-hidden="true" tabindex="-1" href="#redux"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Redux</h3><ul> <li><a href="https://github.com/romseguy/redux-devtools-chart-monitor" title="null" rel="noopener noreferrer">redux-devtools-chart-monitor (⭐292)</a> - A chart monitor for Redux DevTools.</li> <li><a href="https://github.com/gaearon/redux-devtools-dock-monitor" title="null" rel="noopener noreferrer">redux-devtools-dock-monitor (⭐406)</a> - A resizable and movable dock for Redux DevTools monitors.</li> <li><a href="https://github.com/bvaughn/redux-devtools-filterable-log-monitor" title="null" rel="noopener noreferrer">redux-devtools-filterable-log-monitor (⭐155)</a> - Filterable tree view monitor for Redux DevTools.</li> <li><a href="https://github.com/alexkuz/redux-devtools-inspector" title="null" rel="noopener noreferrer">redux-devtools-inspector (⭐238)</a> - Another Redux DevTools Monitor.</li> <li><a href="https://github.com/gaearon/redux-devtools-log-monitor" title="null" rel="noopener noreferrer">redux-devtools-log-monitor (⭐310)</a> - The default monitor for Redux DevTools with a tree view.</li> <li><a href="https://github.com/gaearon/redux-devtools" title="null" rel="noopener noreferrer">redux-devtools (⭐14k)</a> - DevTools for Redux with hot reloading, action replay, and customizable UI.</li> <li><a href="https://github.com/zalmoxisus/remote-redux-devtools" title="null" rel="noopener noreferrer">remote-redux-devtools (⭐1.8k)</a> - Redux DevTools remotely.</li> </ul> <h3 id="inspect-1"><a class="anchor" aria-hidden="true" tabindex="-1" href="#inspect-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Inspect</h3><ul> <li><a href="https://fluxguard.com" title="null" rel="noopener noreferrer">fluxguard</a> - PROD change monitoring that highlights all DOM + design changes.</li> <li><a href="https://github.com/xyc/react-inspector" title="null" rel="noopener noreferrer">react-inspector (⭐750)</a> - Power of Browser DevTools inspectors right inside your React app.</li> <li><a href="https://github.com/Lapple/react-json-inspector" title="null" rel="noopener noreferrer">react-json-inspector (⭐290)</a> - React JSON inspector component.</li> <li><a href="https://github.com/reactotron/reactotron" title="null" rel="noopener noreferrer">reactotron (⭐15k)</a> - A CLI and OS X app for inspecting your React JS and React Native apps.</li> </ul> <h3 id="miscellaneous-3"><a class="anchor" aria-hidden="true" tabindex="-1" href="#miscellaneous-3"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Miscellaneous</h3><ul> <li><a href="https://github.com/ccontrols/component-controls" title="null" rel="noopener noreferrer">component-controls (⭐79)</a> - <a href="https://component-controls.com" title="null" rel="noopener noreferrer">demo</a> - <a href="https://component-controls.com/tutorial" title="null" rel="noopener noreferrer">docs</a> - A next-generation tool to create blazing-fast documentation sites.</li> <li><a href="https://github.com/skidding/cosmos" title="null" rel="noopener noreferrer">cosmos-js (⭐8.2k)</a> - DX tool for designing truly encapsulated React components.</li> <li><a href="https://github.com/mkosir/react-demo-tab-cli" title="null" rel="noopener noreferrer">react-demo-tab-cli (⭐55)</a> - CLI tool for creating demos of react components.</li> <li><a href="https://github.com/sapegin/react-styleguidist" title="null" rel="noopener noreferrer">react-styleguidist (⭐11k)</a> - React style guide generator.</li> <li><a href="https://github.com/feross/standard" title="null" rel="noopener noreferrer">standard-react (⭐29k)</a> - JavaScript Standard Style Guide.</li> <li><a href="https://www.plasmic.app/" title="null" rel="noopener noreferrer">Plasmic</a> - Powerful design tool for building your React components visually.</li> <li><a href="https://github.com/simplelocalize/simplelocalize-cli" title="null" rel="noopener noreferrer">SimpleLocalize (⭐56)</a> - Open source CLI tool for finding i18n keys in React projects.</li> <li><a href="https://github.com/zheeeng/react-device-frameset" title="null" rel="noopener noreferrer">react-device-frameset (⭐64)</a> - React device frameset component.</li> </ul> <h2 id="miscellaneous-4"><a class="anchor" aria-hidden="true" tabindex="-1" href="#miscellaneous-4"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Miscellaneous</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <ul> <li><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md" title="null" rel="noopener noreferrer">DataFormsJS JSX Loader (⭐184)</a> - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.</li> <li><a href="https://github.com/roman01la/html-to-react-components" title="null" rel="noopener noreferrer">html-to-react-components (⭐2.1k)</a> - Extract annotated portions of HTML into React components as separate modules.</li> <li><a href="https://github.com/reactjs/react-magic" title="null" rel="noopener noreferrer">htmltojsx (⭐942)</a> - Automatically AJAXify plain HTML with the power of React. It's magic!.</li> <li><a href="https://github.com/repetere/jsonx" title="null" rel="noopener noreferrer">jsonx (⭐167)</a> - React JSON Syntax.</li> <li><a href="https://github.com/plouc/mozaik" title="null" rel="noopener noreferrer">mozaik (⭐3.6k)</a> - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.</li> <li><a href="https://github.com/Yomguithereal/react-blessed" title="null" rel="noopener noreferrer">react-blessed (⭐4.4k)</a> - A react renderer for blessed.</li> <li><a href="https://github.com/bluepeter/jsondiffpatch-react" title="null" rel="noopener noreferrer">jsondiffpatch-react (⭐9)</a> - JSON diffing.</li> <li><a href="https://github.com/vvo/iron-session" title="null" rel="noopener noreferrer">iron-session (⭐3.4k)</a> - Secure, stateless, and cookie-based session library.</li> </ul> <h3 id="static-website-generator"><a class="anchor" aria-hidden="true" tabindex="-1" href="#static-website-generator"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Static Website Generator</h3><ul> <li><a href="https://github.com/gatsbyjs/gatsby" title="null" rel="noopener noreferrer">gatsby (⭐55k)</a> - Transform plain text into dynamic blogs and websites using React.js.</li> </ul> <h2 id="cloud-solutions"><a class="anchor" aria-hidden="true" tabindex="-1" href="#cloud-solutions"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Cloud Solutions</h2><p><strong><a href="#table-of-contents" title="null"><code>Back to top ⬆️</code></a></strong></p> <h3 id="databases"><a class="anchor" aria-hidden="true" tabindex="-1" href="#databases"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Databases</h3><ul> <li><a href="https://github.com/bcms/cms" title="null" rel="noopener noreferrer">BCMS (⭐302)</a> - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.</li> <li><a href="https://github.com/winwiz1/crisp-bigquery" title="null" rel="noopener noreferrer">crisp-bigquery (⭐43)</a> - Full stack Google BigQuery with Express in TypeScript.</li> <li><a href="https://github.com/mhart/react-server-routing-example" title="null" rel="noopener noreferrer">react-server-routing-example (⭐298)</a> - Universal client/server routing and data with AWS DynamoDB.</li> </ul>