Awesome React components & libraries to use π
This is a list of awesome useful react components and libraries that can solve your problems and boost your app performance & creativity.
UI Components
Editable data grid / spreadsheet
- ag-grid β Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- gigatables-react β Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
- react-data-grid β Excel-like grid.
- revo-grid β demo/docs β Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
- ReactGrid β demo/docs β Add spreadsheet-like behavior to your app
- jqwidgets-react-grid β Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
Table
- autoresponsive-react β Auto Responsive Layout Library For React.
- ka-table β demo β Customizable table component with sorting, filtering, grouping, virtualization, editing etc. π
- material-table β demo/docs β Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
- mui-datatables β Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
- react-data-table β demo/docs β accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
- react-table β demo β Hooks for building fast and extendable tables and datagrids
- rsuite-table β demo/docs β A table component that supports virtualized.
- sematable β 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.
Infinite Scroll
- @egjs/react-infinitegrid β npm β demo β A module used to arrange card elements including content infinitely according to various layout types.
- react-lazyload β Lazyload your Component, Image or anything matters the performance.
- react-list β A versatile infinite scroll React component.
- react-virtualized β React components for efficiently rendering large lists and tabular data.
- react-recycled-scrolling β npm β demo β Simulate scrolling using fixed number of DOM elements for large lists with React Hooks
Overlay
Display overlay / modal / alert / dialog / lightbox / popup
- boron β A collection of dialog animations with React.js.
- react-aria-modal β A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-modal β Accessible modal dialog component for React.
- react-skylight β A react component for modals and dialogs.
- reoverlay β demo β The missing solution for managing modals.
- sweetalert2 β demo/docs β A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScriptβs popup boxes. Zero dependencies.
- sweetalert2-react-content β Official SweetAlert2 enhancer adding support for React elements as content
Notification
Toaster / snackbar β Notify the user with a modeless temporary little popup
- cogo-toast β demo/docs β Plug and play, Promise support, inbuilt styling, ~3.5K. (No refs / provider needed π)
- react-notifications-component β demo β Highly customizable and easy-to-use component for notifications.
- notistack β demo β docs β Highly customizable notification snackbars (toasts) that can be stacked on top of each other
- react-toast β demo β docs β Minimal toast notifications.
- π react-toastify β demo β best bet out there at the moment. Hooks support. No refs.
- react-toast-notifications β demo β pleasing toast system.
- reapop β A React & Redux notifications system.
- simple-react-notifications β demo β Tiny notification library (1kb gzip).
- react-hot-toast β demo β Smoking π₯hotπ₯ Notifications for React. Lightweight, customizable and beautiful by default.
Tooltip
- react-tooltip β React tooltip component.
Menu
Menus / sidebars
- hamburger-react β demo/docs β Animated hamburger menu icons for React.
- react-burger-menu β An off-canvas sidebar with effects and styles.
- react-offcanvas β Off-canvas menus for React.
- react-planet β demo β Create circular menus which looks like planets.
Sticky
Fixed headers / scroll-up headers / sticky elements
- react-headroom β Hide your header until you need it.
- react-sticky β <Sticky /> component for awesome React apps.
- react-stickynode β A performant and comprehensive React sticky.
Tabs
- react-tabs β React tabs component.
- react-tabtab β React, tabs.
Loader
Loaders/spinners/progress bars β Let the user know that something is loading
- react-block-ui β Easy way to block the user from interacting with your UI.
- react-loader β React component that displays a spinner via spin.js until your component is loaded.
- react-md-spinner β Material Design spinner components for React.js.
- react-progress-button β Simple react.js component for an inline progress indicator.
- react-progress-label β Progress label component.
- react-redux-loading-bar β Simple Loading Bar for Redux and React.
- react-spinkit β A collection of loading indicators animated with CSS for React.
- react-spinners-css β Amazing collection of react spinners components.
Carousel
- @egjs/react-flicking β npm β demo β Itβs reliable, flexible and extendable carousel.
- flat-carousel β demo Light weight carousel component for general purpose.
- react-awesome-slider β demo β 3D animated 60fps media and content slider/carousel.
- pure-react-carousel β Built from scratch and not highly opinionated.
- react-id-swiper β A library to use idangerous Swiper as a ReactJs component
- react-instagram-zoom-slider β demo β A slider component with pinch to zoom capabilities inspired by Instagram.
- react-responsive-carousel β React.js Responsive Carousel (with Swipe).
- react-slick β React carousel component.
- keen-slider β demo β Performant carousel/slider with native touch/swipe behaviour.
Buttons
- react-awesome-button β demo β 3D animated 60fps buttons with load progress and social share actions.
- reactive-button β demo β docs β A beautiful animated button component with progress indicator.
Collapse
- react-accessible-accordion β Accessible Accordion component for React.
- react-collapse β Component-wrapper for collapse animation with react-motion.
- react-tabbordion β demo β Universal, semantic and CSS-only components for creating Accordions and Tabs.
Chart
Display data in charts/graphs/diagrams
- chartify β React.js plugin for building animated draggable and customizable charts.
- essential js 2 charts β Beautiful and interactive charts & graphs for react.
- jscharting-react β React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
- react-chartist β React component for Chartist.js.
- react-charty β demo β Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
- react-chartjs-2 β Common react charting components using Chart.js 2.0.
- react-d3-components β D3 Components for React.
- react-dazzle β Dashboards made easy in React JS.
- react-google-charts β React-google-charts React component.
- react-highcharts β React-highcharts.
- react-sigmajs β Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
- react-sparklines β Beautiful and expressive Sparklines React component.
- react-timeseries-charts β Declarative timeseries charts.
- react-vis β Data visualization library based on React and d3.
- recharts β Redefined chart library built with React and D3.
- rumble-charts β React components for building composable and flexible charts.
- victory β 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 β React wrapper for muze(free data visualization library for creating exploratory data visualizations in the browser, using WebAssembly)
Tree
Display a tree data structure
- react-treebeard β React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
- react-treeview β Easy, light, flexible tree view made with React.
UI Navigation
Ways to navigate views
- react-scroll β React scroll component.
- react-swipeable-views β A React Component for binded Tabs and Swipeable Views.
Custom Scrollbar
- rc-scrollbars β demo β Customizable scrollbars with flex options and 60FPS
- react-custom-scroll β demo β Easily customize the browser scroll bar with native OS scroll behaviour.
- react-scrollbar β Scrollbar component for React.
- react-shadow-scroll β Component that customizes the image and inserts shadow when scrolling exists.
Audio / Video
- react-dailymotion β Dailymotion player component for React.
- react-player β A react component for playing a variety of URLs, including YouTube.
- react-soundplayer β Create custom SoundCloud players with React.
- react-youtube β React.js powered YouTube player component.
- video-react β A web video player built for the HTML5 world using React library.
- material-ui-audio-player β Audio player for material UI design.
Map
- google-map-react β Universal google map react component, allows render react components on the google map.
- react-geosuggest β A React autosuggest for the Google Maps Places API.
- react-leaflet β React components for Leaflet maps.
- react-map-gl β A React wrapper for MapboxGL-js and overlay API.
- react-mapbox-gl β A React binding of Mapbox-gl-js.
- react-svg-map β demo β A set of components to display an interactive SVG map.
Time / Date / Age
Display time / date / age
- react-timeago β A simple time-ago component for ReactJs.
- timeago-react β Format date with
*** time ago
statement. eg: '3 hours ago'. - react-google-flight-datepicker β Google flight date picker implemented in ReactJS.
Photo / Image
Display images/photos
- react-compare-image β demo β React component to compare two images using a slider.
- react-image-gallery β Responsive image gallery, carousel, image slider react component.
- react-image-lightbox β React lightbox component.
- react-images β A simple lightbox component for displaying an array of images.
- react-intense β A React component for viewing large images up close.
- react-photo-gallery β Responsive React Photo Gallery.
- react-svg-pan-zoom β A React component that adds pan and zoom features to SVG.
- react-particle-image β demo β Render images as interactive particles.
- react-imgix β Add fast, responsive images as an image, picture, or background!
Icons
Display icons/icon set/emojis
- iconify-react β Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
- react-icons β Svg react icons of popular icon packs using ES6 imports.
- react-open-doodles β Awesome free illustrations as react components.
Paginator
Display a control element to paginate
- react-paginate β A ReactJS component that creates pagination.
- react-laravel-paginex β Laravel Pagination with ReactJS (customizable).
Markdown Viewer
Display parsed markdown source
- react-markdown β Render Markdown as React components.
Canvas
Sketch input using Canvas or SVG
- react-konva β React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
- react-sketch β A Sketch tool for React-based applications, backed-up by FabricJS
- react-sketch-canvas β Demo Freehand vector drawing tool for React using SVG as a canvas. Accepts input from Mouse, touch, and graphic tablets
Miscellaneous
- react-advanced-news-ticker β demo β A flexible and animated vertical news ticker component
- react-avatar-generator β Allows users to create random kaleidoscopes to be used as avatars.
- react-awesome-query-builder β demo β Visual query builder from form fields, with SQL, MongoDB and JSON export
- react-blur β React component for blurred backgrounds.
- react-demo-tab β demo β A React component to easily create demos of other components.
- react-facebook β Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
- fastcomments-react β demo β FastComments component for embedding a live comment thread on a page or SPA.
- react-pdf-viewer β docs β A React component to view a PDF document.
- react-simple-chatbot β demo β A simple chatbot component to create conversation chats.
- react-file-reader-input β File input component for control for file reading styling and abstraction.
- react-filter-control β The React filter builder component for building the filter criteria in the UI.
- react-joyride β Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- react-json-tree β React JSON Viewer Component, Extracted from redux-devtools.
- react-resizable-and-movable β Resizable and movable component for React.
- react-resizable-box β Resizable component for React. #reactjs.
- react-searchbox-awesome β demo β Minimalistic searchbox.
- react-split-pane β React split-pane component.
- react-swipe-to-delete-ios β demo β To delete an item in a list the same way iOS does.
- typography β A powerful toolkit for building websites with beautiful typography.
- react-pulse-text β demo/docs β Allows you to animate the text of any property of another component.
- captcha-image β Allows you to generate a random captcha image with options.
- react-pdf β Display PDFs in your React app as easily as if they were images.
- react-customizable-chat-bot β Demo β Build your own chatbot matching your brand needs in minutes.
- @restpace/schema-form β Demo β Easily build complex forms automatically from a JSON Schema.
Form Components
Let the user enter data
Date / Time picker
Date picker / time picker / datetime picker / date range picker
- date-range-picker β demo β A calendar component that supports date, range & ranges picks.
- react-big-calendar β Gcal/outlook like calendar component.
- react-date-range β A React component for choosing dates and date ranges.
- react-datepicker β A simple and reusable datepicker component for React.
- react-datepicker2 β demo β docs A simple and reusable datepicker component (with persian jalali calendar support).
- react-datetime β A lightweight but complete datetime picker react component.
- react-day-picker β Flexible date picker for React.
- react-flatpickr β Flatpickr for React.
- react-nice-dates β demo/docs A responsive, touch-friendly, and modular date picker library.
- react-simple-timefield β demo β Simple time input field.
- react-timezone-select β demo β Dynamic, succinct timezone select. Based on
react-select
. - react-yearly-calendar β React.js Yearly Calendar Component.
- DevExtreme React Scheduler β High-performance plugin-based scheduler/calendar for Material Design.
- jQWidgets Scheduler β Feature complete Scheduling library.
- react-calendar β Ultimate calendar for your React app.
- react-date-picker β A date picker for your React app.
Emoji picker
- interweave-emoji-picker β A React based emoji picker powered by Interweave and Emojibase.
Input Types
Masked inputs, specialized inputs; email / telephone number / credit card / etc.
- react-credit-cards β Beautiful credit cards for your payment forms.
- react-payment-inputs β demo β A zero-dependency container to help with payment card input fields.
- react-input-mask β demo β Yet another react component for input masking.
- react-maskedinput β Masked <input/> React component.
- react-text-mask β Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
- react-numpad β demo β Extensible number pad control for numbers, dates and times.
Autocomplete
Autosuggest / autocomplete / typeahead
- react-autosuggest β WAI-ARIA compliant React autosuggest component.
- react-typeahead β Pure react-based typeahead and typeahead-tokenizer.
Select
- react-aria-menubutton β A fully accessible, easily themeable, React-powered menu button.
- react-functional-select β demo β Micro-sized & micro-optimized select component for React.js.
- react-select-box β An accessible select box component for React.
- react-select β A Select control built with and for React JS.
Color Picker
- coloreact β A tiny Color Picker for React.
- react-color β Color Pickers from Sketch, Photoshop, Chrome & more.
- react-input-color β React input color component with hsv color picker.
Toggle
- react-ios-switch β React switch component.
- react-toggle β An elegant, accessible toggle component for React. Also a glorified checkbox.
- react-triple-toggle β βοΈ React multi toggle component.
Slider
- react-slider β Slider component for React.
Radio Button
- react-radio-group β Better radio buttons.
Type Select
Let the user select something (e.g. a tag) while typing
- react-autocomplete-input β Autocomplete input field for React.
- react-mentions β Mention people in a textarea.
Tag Input
Let the user add multiple tags in a single input
- @pathofdev/react-tag-input β demo & docs β Minimal tagging component with editable tags
- react-tag-input β A fantastically simple tagging component for your React projects.
- react-tagsinput β A simple react component for inputing tags.
- react-tokeninput β Tokeninput component for React.
Autosize Input / Textarea
- react-input-autosize β Auto-resizing input field for React.
- react-textarea-autosize β <textarea /> component for React which grows with content.
Star Rating
- react-awesome-stars-rating β demo β The star rating component with accessibility.
- react-star-rating-input β React.js component for entering 0β5 (or more) stars.
- react-star-rating β A simple star rating component built with React.
Drag and Drop
- react-beautiful-dnd β Beautiful and accessible drag and drop for lists with React
- react-dnd β Drag and Drop for React.
- react-drag-sizing β βDrag to resizeβ (sizing) as React Component.
- react-draggable β React draggable component.
- react-dragula β Drag and drop so simple it hurts.
- react-dropzone β Simple HTML5 drag-drop zone with React.js.
- react-movable β Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
- react-sortable-pane β Sortable and resizable pane component for React.
Sortable List
Let the user define an order on a list
- react-anything-sortable β Sort any children with touch support and IE8 compatibility.
- react-sortable β A sortable list component built with React.
- sortablejs β Lists reorderable by drag-and-drop, within and among lists.
Rich Text Editor
- alloyeditor β WYSIWYG editor based on CKEditor with completely rewritten UI.
- ckeditor4-react β An official CKEditor 4 rich text editor wrapper.
- ckeditor5-react β An official CKEditor 5 rich text editor wrapper.
- draft-js β A React framework for building text editors.
- megadraft β Rich Text editor built on top of draft.js.
- react-ace β Ace (Advanced Code Editor) wraper.
- react-codemirror β CodeMirror wrapper.
- react-contenteditable β React component for a div with editable contents.
- react-draft-wysiwyg β WYSIWYG editor build on top of DraftJS.
- react-editor β Simple richtext editor that can insert images and HTML.
- react-medium-editor β medium-editor wrapper.
- react-quill β Quill wrapper.
- react-trumbowyg β Trumbowyg wrapper.
Markdown Editor
- react-markdown-editor β A markdown editor using React/Reflux.
- react-md-editor β Markdown editor.
Image Editing
Image manipulation
- react-avatar-cropper β Aiming to be a complete solution for avatar cropping in react.
- react-avatar-editor β Facebook-like, avatar / profile picture component.
- react-easy-crop β Component to crop/rotate images/videos with easy interactions. Touch friendly.
- react-image-crop β A responsive image cropping tool for React.
- react-image-cropper β Image cropper.
Form Component Collections
- formsy-material-ui β A Formsy compatibility wrapper for Material-UI form components.
- formsy-react-components β A set of React JS components for use in a formsy-react form.
- react-input-enhancements β Set of enhancements for input control.
- react-widgets β An Γ la carte set of polished, extensible, and accessible inputs.
Miscellaneous
- interweave β React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
- react-designer β Easy to configure, lightweight, editable vector graphics in your react components.
- react-upload-gallery β React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
Syntax Highlight
- react-syntax-highlighter β Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.
UI Layout
Components to layout the appβs UI
- autoresponsive-react β Auto responsive grid layout library.
- flexbox-react Unopinionated, standard compliant flexbox components.
- golden-layout β A multi-screen JavaScript Layout manager.
- hedron β A no-frills flexbox grid system, powered by styled-components.
- m-react-splitters β Splitter component, written in TypeScript.
- muuri-react β demo β docs β Responsive, sortable, filterable and draggable grid layouts.
- react-grid-layout β A draggable and resizable grid layout with responsive breakpoints, for React.
- react-masonry-component β Wrapper for @desandroβs Masonry.
- react-reflex β Flex layout container component for advanced React web applications.
- react-spaces β demo/docs β Nestable anchored, resizable, scrollable components.
- react-stonecutter β Animated grid layout component.
- react-colrow β Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
UI Animation
Animate transitions
- react-tweenful β demo β Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.
- data-driven-motion β Easily animate your data.
- react-anime β A super easy animation library.
- react-flip-move β Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
- react-gsap-enhancer β Use the full power of React and GSAP together.
- react-magic-move β MagicMove wrapper.
- react-tsparticles β A lightweight component to easily create interactive particles animations
- react-motion β A spring that solves your animation problems.
- react-mt-svg-lines β Wrapper to animate the line stroke in SVGs.
- react-router-transition β Transitions built for react-router, powered by react-motion.
- react-spring β A spring physics based animation library.
- framer-motion β An animation and gesture library.
- react-spark-scroll β Scroll-based actions and animations for react.
- react-track β Track the position of DOM elements. Create cool animations.
- react-transitive-number β Apply transition effect to numeric strings, a la old Groupon timers.
- react-web-animation β React components for the Web Animations API -.
- velocity-react β Velocity.js wrapper.
- auto-size-transition β A component that scale dynamically according to the internal children size
- react-particles-bg β Particles backgrounds.
- gooey-react β demo/docs β The gooey effect for React, used for shape blobbing / metaballs.
Parallax
- react-parallax-component β Easiest way to add scroll parallax effect on the component.
- react-parallax-tilt β demo β Easily apply parallax tilt hover effect on components.
UI Frameworks
Responsive
Set of components + responsive layout system
- zeit-ui-react β Modern and minimalist React UI library.
- π ant-design β 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.
- belle β Configurable React Components with great UX.
- carbon β demo/docs β A design system built by IBM.
- chakra-ui β demo/docs β Simple, Modular & Accessible UI Components for your React Applications.
- evergreen β demo/docs β Evergreen React UI Framework by Segment.
- fluent-ui β demo/docs β π React components that inspired by Microsoftβs Fluent Design System.
- grommet β The most advanced UX framework for enterprise applications.
- gestalt β demo/docs β A set of components that supports Pinterestβs design language.
- insites-ui β Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.
- office-ui-fabric-react β React components for building Microsoft web experiences.
- orbit-components β Components for building travel oriented projects.
- pivotal-ui-react β React components based on a custom version of the Bootstrap library.
- primereact β A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
- react-bootstrap β Bootstrap components built with React.
- react-foundation β Foundation as React components.
- reakit β demo/docs Toolkit for building accessible rich web apps
- rebass β Configurable React Stateless Functional UI Components.
- searchkit β React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- semantic-ui-react β The official Semantic-UI-React integration.
- shineout β demo β Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
Material Design
- π Material-UI β Full suite of components. Build your own design system, or start with Material Design.
- Autocomplete β Accessible autocomplete, combobox, multiselect
- 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 β Essence β The Essential Material Design Framework.
- react-materialize β Material design for react, powered by materializecss.
- react-toolbox β A set of React components implementing Googleβs Material Design.
- mdbootstrap β React Bootstrap with Material Design
Mobile
- antd-mobile β Configurable Mobile UI from China.
- Ionic React β Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
- OnsenUI β demo/docs β Mobile app framework with Material and flat (iOS) designs. Based on Web Components.
Component Collections
- blueprint β 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 β docs/demo β A beautiful and modern React design system. Freemium π°
- aframe-react β Build virtual reality experiences with A-Frame and React.
- react-admin β Build admin user experiences on top of REST and GraphQL services.
- react-desktop β React UI Components for macOS Sierra and Windows 10.
- matrix-card β demo β Simplest possible component to generate matrix rain style cards.
- rsuite β demo/docs β Suite of components for βenterprise system productsβ.
UI Utilities
Reporter
Report computed styles
Visibility Reporter
Report when a component becomes visible/hidden
- react-visibility-sensor β Sensor component.
- react-waypoint β A React component to execute a function whenever you scroll to an element.
Measurement Reporter
Determine and report measurements of an element
- react-component-queries β Provide props to your Components based on their Width and/or Height.
- react-container-dimensions β Wrapper component that detects element resize.
- react-dimensions β React higher-order component to get dimensions of container.
- react-height β Component-wrapper to determine and report children elements height.
- react-measure β Compute measurements of a React component.
- react-sizeme β Make your React Components aware of their width and height.
Device Input
Turn user input into actions
Keyboard Events
- react-hotkeys β Declarative hotkey and focus area management for React.
- react-key-handler β React component to handle keyboard events.
- react-keydown β Lightweight keydown wrapper for React components.
- react-shortcuts β Manage keyboard shortcuts from one place.
- useKeyCapture β A custom hook to ease the key-press listeners of a target/global.
Scroll Events
- react-scroll-components β A set of components that react to page scrolling.
Touch Swipe
- react-swipe β Swipe.js as a React component.
Mouse Events
- react-aim β Determine the cursor aim for triggering mouse events.
- react-hook-mighty-mouse β demo β Hook that tracks mouse events on selected element.
Meta Tags
Set meta tags, <title>, children of
- react-document-meta β HTML meta tags for React-based apps.
- react-document-title β Declarative, nested, stateful, isomorphic document.title for React.
- react-helmet β A document head manager for React.
Portal
Render an element at an arbitrary DOM node
- react-gateway β Render React DOM into a new context (aka βPortalβ).
- react-layer-stack β Simple but ubiquitously powerful and agnostic layering system for React.
- react-portal β React component for transportation of modals, lightboxes, loading barsβ¦ to document.body.
Test User Behavior
A/B tests, experiments, β¦
- react-ab β Simple declarative and universal A/B testing component for React.
- react-experiments β React components for implementing UI experiments.
Code Design
Libraries that help with code design
Data Store
Data flow / data management / data stores / components state / data flow
- alt β Isomorphic flux implementation.
- baobab-react β React integration for Baobab.
- cerebral β A state controller with its own debugger.
- effector-react β React bindings for effector, an effective multi-store state manager.
- fluorine-lib β Reactive state and side effect management for React using a single stream of actions.
- fluxible β A pluggable container for universal flux applications.
- fluxxor β Flux architecture tools for React.
- kea β High level architecture for React apps.
- mobx-react β React bindings for MobX. Create fully reactive components.
- react-3ducks β demo β Simple state management solution for React.
- react-controllables β Easily create controllable components.
- react-i13n β A performant, scalable and pluggable approach to instrumenting your React application.
- react-redux-provide β Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
- react-redux β Official React bindings for Redux.
- react-storage-hoc β demo β Higher-order components for working with localStorage and sessionStorage.
- redux-batched-actions β Reducer + action to reduce actions under a single subscriber notification.
- redux-batched-subscribe β Store enhancer for which allows batching subscribe notifications.
- redux β Predictable state container for JavaScript apps.
- reflux β A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
- reselect β Selector library for Redux.
- resourcerer β Declarative data-fetching framework for REST APIs
- shasta β Dead simple + opinionated toolkit for building redux/react applications.
Form Logic
- data-driven-forms β A declarative way for building forms with all the functionality.
- formcat β A simple and easy way to control forms in React using the React Context API
- formik β Build forms without tears and supports Validation in ease.
- formsy-react β A form input builder and validator for React JS.
- plexus-form β A dynamic form component for react using JSON-Schema.
- react-hook-form β React hooks for form validation without the hassle.
- react-jsonschema-form β A React component for building Web forms from JSONSchema.
- react-validation-mixin β Simple validation mixin (HoC) for React.
- react-final-form β Subscription-based form state management
- react-formawesome β Complex library for creating awesome forms.
- surveyjs β The advanced Survey and Form library
Router
- cerebral-module-router β An opinionated URL change handler for Cerebral.
- monorouter β An isomorphic JS router.
- react-breadcrumbs β Automatic breadcrumbs for React-Router.
- react-router-component β Declarative router component for React.
- react-router-scroll β React Router scroll management.
- react-router β A complete routing library for React.
- redux-router β Redux bindings for React Router β keep your router state inside your Redux store.
- universal-router β A simple middleware-style router for isomorphic JavaScript web apps.
- redux-first-history β Redux First History β Redux history binding support react-router β @reach/router β wouter
Props from server
Component properties asynchronously fetched over the network
- react-async β Asynchronously fetch data for React components.
- react-refetch β A simple, declarative, and composable way to fetch data for React components.
- react-resolver β Async rendering & data-fetching for universal React applications.
- react-router-relay β Relay integration for React Router.
- redial β Universal data fetching and route lifecycle management for React etc.
- redux-async-connect β Request async data, store in redux state, and connect to your component.
- redux-connect β Provides decorator for resolving async props in react-router.
- axios-react β HTTP client component for React.
Communication with server
- adrenaline β Simple Relay alternative.
- apollo-client β A simple caching client for any GraphQL server and UI framework.
- cerebral-module-http β HTTP module for Cerebral.
- react-apollo β React data container for the Apollo Client.
- react-relay β Relay is a JavaScript framework for building data-driven React applications.
- react-transmit β Relay-inspired library based on Promises instead of GraphQL.
CSS / Style
- aesthetic β A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
- aphrodite β Itβs inline styles, but they work!.
- classnames β A simple javascript utility for conditionally joining classNames together.
- inline-style-prefixer β Run-time Autoprefixer for Inline Style Objects.
- paperclip β docs β Build UI primitivites with plain HTML & CSS.
- radium β A set of tools to manage inline styles on React elements.
- react-container-query β Modular responsive component.
- react-css-modules β Seamless mapping of class names to CSS modules inside of React components.
- react-responsive β Media queries in react for responsive design.
- reactponsive β Responsive components and hooks.
- styled-components β Visual primitives for the component age.
HTML Template
- hyperx β Tagged template string virtual dom builder.
- jsx-control-statements β Neater If and For for React JSX.
Isomorphic Apps
- hypernova β A service for server-side rendering your JavaScript views.
- isomorphic-relay β Adds server side rendering support to React Relay.
- isomorphic-style-loader β Isomorphic CSS style loader for Webpack.
- react-server β React framework with server render for blazing fast page load.
- rill β Universal web application framework.
- webpack-isomorphic-tools β Server-side rendering for your Webpack-built applications (e.g. React).
Boilerplate
Scaffold / starter kit / Yeoman generator / stack ensemble / seed
- create-react-app β Create React apps with no build configuration.
- crisp-react β Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
- electron-react-boilerplate β Live editing development on desktop app.
- essential-react β A minimal skeleton for building testable React apps using Babel.
- generator-react-webpack β Yeoman generator for ReactJS and Webpack.
- generator-starhackit β Full-stack starter kit.
- gluestick β GlueStick is a command line interface for quickly developing universal web apps.
- nwb β CLI tool and devDependency for React apps & components and npm modules.
- react-boilerplate β Quick packager-agnostic boilerplate for React modules using JSX.
- react-hot-boilerplate β Minimal live-editing boilerplate for your next ReactJS project.
- react-redux-universal-hot-example β A starter boilerplate for a universal webapp.
- reactuate β React/Redux stack (not a boilerplate kit).
- redux-cli β An opinionated CLI for building redux/react apps quicker.
- relay-fullstack β Relay Starter Kit.
- roc β Modern Application Development Ecosystem.
- universal-redux β An npm package that lets you jump right into coding React and Redux.
- create-react-dependency β Create react dependencies with no build configuration.
- phoenix β A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
- react-enterprise-starter-kit β Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
- express-react-boilerplate β A tool that helps programmers create Express & React projects easily base on react-cool-starter.
Miscellaneous
- react-inlinesvg β An SVG loader component for ReactJS.
- redux-auth-patch β Complete token authentication system for react + redux that supports isomorphic rendering.
- redux-search β Redux bindings for client-side search.
- tcomb-react β Alternative syntax for PropTypes.
- react-find β βοΈ Elegant, accessible search component for React.
- react-universal-hooks β π support react hooks everywhere (Functional or Class Component).
Utilities
- qrcode.react β A <QRCode/> component for use with React.
- react-children-utilities β Extended utils for React.Children.
- react-media β A CSS media query component for React.
- react-middle-ellipsis β demo β Truncate long strings in the middle instead of the end.
- react-translate-component β Multi-lingual/localized text content.
i18n
Internationalization / L10n / localization / translation
- react-i18next β Internationalization for react done right. Using the i18next i18n ecosystem.
- react-intl β Internationalize React apps.
- react-translate-maker β Universal internationalization (i18n) open source library for React.
- react-intl-universal β demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
- js-lingui β docs β A readable, automated, and optimized (5 kb) internationalization for JavaScript.
Framework bindings / integrations
- backbone-react-component β A bit of nifty glue that automatically plugs your Backbone models.
- elm-react-component β A React component which wraps an Elm module to be used in a React application.
- gl-react β OpenGL / WebGL bindings for React to implement complex effects over images and content.
- react-backbone β Backbone-aware mixins for react and a whole lot more.
- react-d3-library β Open source library for using D3 in React.
- react-elm-components β Write React components in Elm.
- react-famous β React bridge to Famo.us.
- react-localstorage β Simple componentized localstorage implementation for Facebookβs React.
- react-lottie-player β demo β Declarative lottie animation player.
- react-on-rails β Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
- react-three-renderer β Render into a three.js canvas using React.
- react-threejs β Simplest bindings between React & Three.js
- reactfire β ReactJS mixin for easy Firebase integration.
- reactive-elements β Allows to use React.js component as HTML element (web component).
Integrations with Third Party Services
- react-ga β React Google Analytics Module.
- react-google-analytics β Google analytics component.
- react-recaptcha β A react.js reCAPTCHA for Google.
- react-stripe-checkout β Load stripeβs checkout.js as a react component. Easiest way to use checkout with React.
- redux-segment β Segment.io analytics integration for redux.
Performance
UI
- inferno β An extremely fast, React-like JavaScript library for building modern user interfaces.
- react-fastclick β Fast Touch Events for React.
- react-static-container β Renders static content efficiently.
Inspect
- react-perf-tool β Debug performance of your React application.
- react-render-visualizer β Render visualizer for ReactJS.
Lazy Load
- react-infinite-grid β A React component which renders a grid of elements.
- react-infinite β A browser-ready efficient scrolling container based on UITableView.
- react-lazy-load β React component that renders children elements when they enter the viewport.
- react-lazyload β Lazyload your Component, Image or anything matters the performance.
- react-virtualized β React components for efficiently rendering large lists and tabular data.
App Size
- babel-plugin-transform-react-remove-prop-types β Remove unnecessary React propTypes.
- react-lite β An implementation of React that optimizes for small script size.
Server-Side Rendering
- react-esi β A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
Dev Tools
Test
- carte-blanche β An isolated development space with integrated fuzz testing for your components.
- chai-enzyme β Chai.js assertions and convenience functions for testing React Components with enzyme.
- enzyme β JavaScript Testing utilities for React.
- jest-cli β Painless JavaScript Testing.
- react-unit β Lightweight unit test library for ReactJS.
- redux-ava β Write AVA tests for redux pretty quickly.
- redux-test-recorder β A redux middleware to automatically generate tests for reducers through ui interaction.
- rut β React testing made easy with
react-test-renderer
. Supports DOM and custom renderers. - ui-harness β Create, isolate and test modular UI components in React.
- unexpected-react β Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
Redux
- redux-devtools-chart-monitor β A chart monitor for Redux DevTools.
- redux-devtools-dock-monitor β A resizable and movable dock for Redux DevTools monitors.
- redux-devtools-filterable-log-monitor β Filterable tree view monitor for Redux DevTools.
- redux-devtools-inspector β Another Redux DevTools Monitor.
- redux-devtools-log-monitor β The default monitor for Redux DevTools with a tree view.
- redux-devtools β DevTools for Redux with hot reloading, action replay, and customizable UI.
- remote-redux-devtools β Redux DevTools remotely.
Inspect
- fluxguard β PROD change monitoring that highlights all DOM + design changes.
- react-inspector β Power of Browser DevTools inspectors right inside your React app.
- react-json-inspector β React JSON inspector component.
- reactotron β A CLI and OS X app for inspecting your React JS and React Native apps.
Miscellaneous
- component-controls β demo β docs β A next-generation tool to create blazing-fast documentation sites.
- cosmos-js β DX tool for designing truly encapsulated React components.
- react-demo-tab-cli β CLI tool for creating demos of react components.
- react-heatpack β A βheatpackβ command for quick React development with webpack hot reloading.
- react-styleguidist β React style guide generator.
- standard-react β JavaScript Standard Style Guide.
Miscellaneous
- DataFormsJS JSX Loader β Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
- html-to-react-components β Extract annotated portions of HTML into React components as separate modules.
- htmltojsx β Automatically AJAXify plain HTML with the power of React. Itβs magic!.
- jsonx β React JSON Syntax.
- mozaik β MozaΓ―k is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
- react-blessed β A react renderer for blessed.
Static Website Generator
- gatsby β Transform plain text into dynamic blogs and websites using React.js.
- phenomic β Modern static* website generator based on the React and Webpack ecosystem.
Cloud Solutions
Databases
- crisp-bigquery β Full stack Google BigQuery with Express in TypeScript.
- react-server-routing-example β Universal client/server routing and data with AWS DynamoDB.
Enjoy :)