GithubHelp home page GithubHelp logo

makotot / awesome-react-components Goto Github PK

View Code? Open in Web Editor NEW

This project forked from brillout/awesome-react-components

0.0 2.0 0.0 797 KB

Curated List of React Components & Libraries.

License: Creative Commons Zero v1.0 Universal

awesome-react-components's Introduction

🚀 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.

Maintainers:

Contributing

Please review our contributing guidelines. 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

  • 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

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

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

Carousel

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

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

Custom Scrollbar

Audio / Video

Map

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

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

Markdown Viewer

Display parsed markdow source

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 canvas. Accepts input from Mouse, touch, and graphic tablets

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Let the user define an order on a list

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

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

UI Layout

Components to layout the app's UI

UI Animation

Animate transitions

Parallax

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

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, <title>, children of

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

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

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

Isomorphic Apps

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

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

Integrations with Third Party Services

Performance

UI

Inspect

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

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

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

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

awesome-react-components's People

Contributors

99ff00 avatar ahmetcanaydemir avatar anishagg17 avatar axmz avatar bluepeter avatar bmarkov avatar brillout avatar dandv avatar devarchy-bot avatar gpietro avatar joaomlneto avatar kirkins avatar komarovalexander avatar lindelof avatar mkosir avatar prabakaranr avatar pranesh239 avatar rcaferati avatar realfresh avatar rvsia avatar salvoravida avatar sarons avatar simonguo avatar sivailango avatar soroushchehresa avatar teodosii avatar ukrbublik avatar victorcazanave avatar winrid avatar winwiz1 avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.