本文共 27736 字,大约阅读时间需要 92 分钟。
React Components Catalog
http://www.ctolib.com/awesome-react-components.html - Dedicated interface at
- Contributions welcome, see
Contents
UI Components
Table / Data Grid
- - Fast, flexible, and simple data tables in React.
- - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- - Simple Grid Component written in React.
- - A carefully crafted DataGrid for React.
- - React components for sorting, filtering and pagination of data.
- - It's a react table for bootstrap.
- - Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like.
- - React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
- - Auto Responsive Layout Library For React.
- - Spectacular tables for React.
- - A React table component designed to allow presenting thousands of rows of data.
- - Client side sorting, pagination, and text filter for redux/react based apps.
Infinite Scroll
- - Lazyload your Component, Image or anything matters the performance.
- - A UITableView Inspired list and grid display solution with element culling and smooth animations.
- - A browser-ready efficient scrolling container based on UITableView.
- - A React component which renders a grid of elements.
- - A versatile infinite scroll React component.
- - React components for efficiently rendering large lists and tabular data.
Modals
Display overlay / modal / dialog
- - Resizable dockable react component.
- - Utilities for creating robust overlay components.
- - A collection of dialog animations with React.js.
- - Simple modal component for React.
- - Accessible modal dialog component for React.
- - A react component for modals and dialogs.
- - A React modal with animations.
- - React Modal Box Component.
- - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
Notification
A temporary little modal to notify the user
- - A complete and totally customizable component for notifications in React.
- - Snackbar notifications for React.
- - Alerts / Notifications for React with rich configuration options.
- - A message component for reactjs.
Tooltips
- - React tooltip component.
- - React Tooltip.
- - Awesome React tooltips.
Menu
Menus / Sidebars
- - An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations.
- - A sidebar component for React.
- - Motion menu component powered by React Motion.
- - Off-canvas menus for React.
- - A stateless tree menu component for React.
- - A ready-to-use menu component for React.
Sticky
Implementations similar to position: sticky
- - <Sticky /> component for awesome React apps.
- - Hide your header until you need it.
- - React listview with sticky section header.
- - React StickyState Component makes native position:sticky statefull and polyfills the missing sticky browser feature.
- - A performant and comprehensive React sticky.
Tabs
- - React tabs component.
- - Just a simple tabs component built with React.
- - React, tabs.
Loading / Progress Indicators
Let the user know that something is being loaded
- - A collection of loading spinners with React.js.
- - React wrapper for Ladda buttons.
- - Simple react.js component for an inline progress indicator.
- - React component that displays a spinner via spin.js until your component is loaded.
- - A collection of loading indicators animated with CSS for React.
- - Progress label component.
- - Simple Loading Bar for Redux and React.
Carousels
- - React carousel component.
Collapse
- - Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height.
Charts
Display data in graphs / diagrams
- - React component for Chartist.js.
- - Lightweight event system for (d3) charts and other components for ReactJS.
- - D3 Components for React.
- - Redefined chart library built with React and D3.
- - Common react charting components using chart.js.
- - Dashboards made easy in React JS.
- - Data visualization library based on React and d3.
- - React component for rendering simple sparklines.
- - Beautiful and expressive Sparklines React component.
- - React components for building composable and flexible charts.
- - React component for micro bar-charts rendered with D3.
- - Declarative timeseries charts.
- - React-google-charts React component.
Tree
Display a tree data structure
- - Easy, light, flexible tree view made with React.
- - React tree component.
- - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
UI Navigation
Ways to navigate views
- - React scroll component.
- - A React Component for binded Tabs and Swipeable Views.
Custom Scrollbar
- - React scrollbars component.
- - Scrollbar component for React.
- - React implementation of smooth-scrollbar.
- - React component for custom overlay-scrollbars with native scrolling mechanism.
- - Easily customize the browser scroll bar with native OS scroll behavior.
Audio / Video
- - A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo.
- - React.js powered YouTube player component.
- - Create custom SoundCloud players with React.
- - React component to load video from Vimeo or Youtube across any device.
- - Make beats with React.
- - Dailymotion player component for React.
Map
- - A Google Maps component for React.js.
- - Universal google map react component, allows render react components on the google map.
- - A declarative React interface to Google Maps.
- - React components for Leaflet maps.
- - A React autosuggest for the Google Maps Places API.
- - A React wrapper for MapboxGL-js and overlay API.
Time / Date / Age
Display time / date / age
- - Component for React to render relative and/or formatted dates into <time> HTML5 element.
- - A simple time-ago component for ReactJs.
Photo / Image
- - Responsive image gallery, carousel, image slider react component.
- - A simple lightbox component for displaying an array of images.
- - Responsive React Photo Gallery.
- - A React component that adds pan and zoom features to SVG.
Touch Swipe
- - Swipe.js as a React component.
Miscellaneous
- - Time Sheet Component for React.
- - Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
- - React component for blurred backgrounds.
- - Render Markdown as React components.
- - React split-pane component.
- - A powerful toolkit for building websites with beautiful typography.
- - A ReactJS component that creates a pagination.
- - React JSON Viewer Component, Extracted from redux-devtools.
- - Svg react icons of popular icon packs using ES6 imports.
- - An emoji mixin for React.
- - Resizable and movable component for React.
- - Dragable and Resizable window build with React.js.
- - Resizable component for React. #reactjs.
- - React file input component for complete control over styling and abstraction from file reading.
- - A React component for display a dial-type chart of PageSpeed Insights.
- - An autolink mixin for React.
- - Configurable animated SVG buttons for react.
- - Universal React avatar component makes it possible to generate avatars based on user information.
- - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- - Hash strings to Material UI colors.
Component Collections
- - Collection of reusable React Components and utility functions.
- - React components used by Khan Academy.
Form Components
Let the user enter data
Date / Time picker
- - A carefully crafted date picker for React.
- - A simple and reusable datepicker component for React.
- - React Calendar.
- - A React component for choosing dates and date ranges.
- - Flexible date picker for React.
- - A React based date range picker.
- - React.js Yearly Calendar Component.
- - A modular toolkit to build calendar-related things in React.
- - React datetime picker powered by momentjs.
- - A lightweight but complete datetime picker react component.
- - A react.js datetime picker for bootstrap.
- - A date/time picker for react (using bootstrap). This is a react port of bootstrap-daterangepicker.
- - Gcal/outlook like calendar component.
- - A React Date Select / Picker Input Component.
- - Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.
Rich Text Editing
- - A Quill component for React.
- - React Ace Component.
- - React component for a div with editable contents.
- - Codemirror Component for React.js.
- - React wrapper for medium-editor.
- - A React framework for building text editors.
- - Collaborative web-based rich text editor.
- - Rich Text editor built on top of draft.js.
Sortable List
Let the user define an order on a list
- - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap.
- - A ReactJS component that can sort any children with touch support and IE8 compatibility.
- - A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.
- - A sortable list component built with React.
Drag and Drop
- - React draggable component.
- - Touch Backend for react-dnd.
- - Simple HTML5 drag-drop zone with React.js.
- - Drag and Drop for React.
- - Sortable and resizable pane component for React.
Autocomplete
Autosuggest / autocomplete / typeahead
- - WAI-ARIA compliant React autosuggest component.
- - Pure react-based typeahead and typeahead-tokenizer.
- - Typeahead, written using the React.js library.
Select
- - A Stateless & Flexible Select component for React inspired by Selectize.
- - A fully accessible, easily themeable, React-powered menu button.
- - A Select control built with and for React JS.
- - An accessible select box component for React.
Color Picker
- - React input color component with hsv color picker.
- - Color Pickers from Sketch, Photoshop, Chrome & more.
- - A tiny Color Picker for React.
Toggle
- - An elegant, accessible toggle component for React. Also a glorified checkbox.
- - React switch component.
Slider
- - React Slider.
- - Slider component for React.
Radio Button
Star Rating
- - A simple star rating component built with React.
- - React.js component for entering 0-5 (or more) stars.
Type Select
Let the user select a tag / something while typing
- - A simple react component for inputing tags.
- - A fantastically simple tagging component for your React projects.
- - Mention people in a textarea.
- - Tokeninput component for React.
Masked Input
- - Yet another react component for input masking.
- - Masked <input/> React component.
- - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
Autosize Input / Textarea
- - Auto-resizing input field for React.
- - <textarea /> component for React which grows with content.
Image Editing
- - Aiming to be a complete solution for avatar cropping in react.
- - Facebook like, avatar / profile picture component. Resize and crop your uploaded image using a clear user interface.
- - A responsive image cropping tool for React.
- - React image crop.
Markdown Editor
- - React.js Markdown Editor Component.
- - A markdown editor using React/Reflux.
Form Component Collections
- - A set of React JS components for use in a formsy-react form. Markup adheres to Bootstrap 3 form structure.
- - A Formsy compatibility wrapper for Material-UI form components.
- - Set of enhancements for input control.
- - An à la carte set of polished, extensible, and accessible inputs built for React.
Miscellaneous
- - Easy to configure, lightweight, editable vector graphics in your react components.
UI Layout
Components to layout the app's UI
- - React grid system based on minimum and maximum widths.
- - React flexbox implementation.
- - A React.js mixin for using @desandro's Masonry.
- - Predictable flexbox based grid for React.
- - Layout Components for React based on Flexbox.
- - A draggable and resizable grid layout with responsive breakpoints, for React.
- - A React.js component for using @desandro's Masonry.
- - A set of React components implementing flexboxgrid with the power of CSS Modules.
- - Animated grid layout component for React.
- Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components.
- - Auto responsive grid layout library.
- - A multi-screen javascript Layout manager.
- - A minimal window manager built using React.
UI Animation
Animate transitions
- - React animation.
- - A spring that solves your animation problems.
- - React component to apply transition effect to numeric strings, a la old Groupon timers.
- - Scroll-based actions and animations for react.
- - Wrapper component around React Motion for easier UI transitions.
- - MagicMove for React.js.
- - React components for Velocity.js.
- - Track the position of DOM elements. Create cool animations.
- - Anim react element easily.
- - Transitions built for react-router, powered by react-motion.
- - Use the full power of React and GSAP together.
- - A React.js wrapper component to animate the line stroke in SVGs.
- - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
- - State animation plugin for react.js.
- - A super easy animation library for React.
- - AnimakitRotator - React component for the 3D rotation of the blocks.
- - AnimakitElastic - React component for flexible resizing of the blocks.
- - AnimakitExpander - React component for the expanding and collapsing of the blocks.
Parallax
- - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
- - Easiest way to add scroll parallax effect on the component.
UI Frameworks
Website
- - A flexible and beautiful UI framework for React.js.
- - A collection of components for React.
- - Configurable React Components with great UX.
- - React UIkit Components for the UIKit CSS framework.
- - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- - Configurable React Stateless Functional UI Components.
- - Foundation Apps components built with React.
- - The most advanced UX framework for enterprise applications.
Bootstrap
- - Bootstrap 3 components built with React.
- - Simple React Bootstrap 4 components.
Material Design
- - React Components for Material Design Lite.
- - Material design for react, powered by materializecss.
- - A set of React components implementing Google's Material Design specification with the power of CSS Modules.
- - Material design components written with React.js and React Style.
- - React Components that Implement Google's Material Design.
- - Essence - The Essential Material Design Framework.
Mobile
- - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components.
- - React Ionic.
- - Mobile App Framework powered by React.
Other
- - React UI Components for macOS Sierra and Windows 10.
- - Build virtual reality experiences with A-Frame and React.
UI Utilites
Reporter
Report computed styles
Visibility Reporter
Report when a component becomes visible/hidden
- - A React component to execute a function whenever you scroll to an element.
- - Sensor component for React that notifies you when it goes in or out of the window viewport.
Measurement Reporter
Determine and report measurements of an element
- - Compute measurements of a React component.
- - Component-wrapper to determine and report children elements height.
- - React component-wrapper detecting height changes of it's children.
- - React higher-order component to get dimensions of container.
- - Provide props to your Components based on their Width and/or Height.
Portal
Render React DOM into a new context (aka "Portal")
- - React component for transportation of modals, lightboxes, loading bars... to document.body.
Device Events
Keyboard Events
- - Lightweight keydown wrapper for React components.
- - Declarative hotkey and focus area management for React.
Scroll Events
- - A set of components that react to page scrolling.
Touch Events
- - ReactJS / HammerJS integration. Support touch events in your React app.
- - Tappable component for React.
Mouse Events
- - Determine the cursor aim for triggering mouse events.
Test User Behavior
A/B tests, experiments, ...
- - Simple declarative and universal A/B testing component for React.
- - React components for implementing UI experiments.
Set Children of <head>
- - A document head manager for React.
- - Declarative, nested, stateful, isomorphic document.title for React.
- - HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.
Code Design
Libraries that help with code design
Data Store
Data flow / data management / data stores / components state / data flow
- - Official React bindings for Redux.
- - Reactive state and side effect management for React using a single stream of actions.
- - Redux higher order reducer + action to reduce actions under a single subscriber notification.
- - A performant, scalable and pluggable approach to instrumenting your React application.
- - Dead simple + opinionated toolkit for building redux/react applications.
- - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. Share, manipulate, and replicate application state across any number of components.
- - Store enhancer for which allows batching subscribe notifications.
- - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
- - Flux architecture tools for React.
- - A pluggable container for universal flux applications.
- - Isomorphic flux implementation.
- - React integration for Baobab.
- - Selector library for Redux.
- - Easily create controllable components.
- - A React utility belt for function components and higher-order components.
- - Easy UI state management for react redux.
- - Predictable state container for JavaScript apps.
- - React bindings for MobX. Create fully reactive components.
- - A state controller with its own debugger.
Form Logic
- - A React component for building Web forms from JSONSchema.
- - Simple validation mixin (HoC) for React.
- - INACTIVE] Isomorphic form-handling for React.
- - A form input builder and validator for React JS.
- - A Higher Order Component using react-redux to keep form state in a Redux store.
- - Generate complex, validated and extendable JSON-based forms in React.
- - Create forms easily in React with Redux.
- - Forms library for react.
- - A dynamic form component for react using JSON-Schema.
- - A forms handler for Cerebral.
Router
- - A complete routing library for React.
- - Declarative router component for React.
- - Redux bindings for React Router – keep your router state inside your Redux store.
- - React Router scroll management.
- - A simple middleware-style router for isomorphic JavaScript web apps.
- - A complete routing solution for React.js.
- - Ruthlessly simple bindings to keep react-router and redux in sync.
- - Automatic breadcrumbs for React-Router.
- - An isomorphic JS router.
- - An opinionated URL change handler for Cerebral.
Props from server
Component properties asynchronously fetched over the network
- - Asynchronously fetch data for React components.
- - It allows you to request async data, store them in redux state and connect them to your react component.
- - Co-located data loading for React Router.
- - Relay integration for React Router.
- - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.
- - Async rendering & data-fetching for universal React applications.
- - A simple, declarative, and composable way to fetch data for React components.
- - Relay integration for React Router.
- - Universal data fetching and route lifecycle management for React etc.
Communication with server
- - Simple Relay alternative.
- - Relay-inspired library based on Promises instead of GraphQL.
- - A simple caching client for any GraphQL server and UI framework.
- - React data container for the Apollo Client.
- - Relay is a JavaScript framework for building data-driven React applications.
- - HTTP module for Cerebral.
CSS / Style
- - Media queries in react for responsive design.
- - Seamless mapping of class names to CSS modules inside of React components.
- - It's inline styles, but they work!.
- - PostCSS for React Inline Styles, Free Style and other CSS-in-JS.
- - Write CSS inside your React components!.
- - A simple javascript utility for conditionally joining classNames together.
- - Modular responsive component.
- - Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools.
- - Encapsulated styling for your javascript components with all the power of javascript and CSS combined.
- - Define React presentational components with CSS.
- - Run-time Autoprefixer for Inline Style Objects.
HTML Template
- - Neater If and For for React JSX.
- - Light weight templates for react.
- - Tagged template string virtual dom builder.
Isomorphic Apps
- - A service for server-side rendering your JavaScript views.
- - React framework with server render for blazing fast page load and seamless transitions between pages in the browser.
- - Server-side rendering for your Webpack-built applications (e.g. React).
- - Adds server side rendering support to React Relay.
- - Universal web application framework.
- - Isomorphic CSS style loader for Webpack.
Boilerplate
Boilerplates / scaffolds / starter kits / generators / stack ensembles
- Create React apps with no build configuration.
- - An opinionated CLI for building redux/react apps quicker.
- - React/Redux stack (not a boilerplate kit).
- - A minimal skeleton for building testable React apps using Babel.
- - GlueStick is a command line interface for quickly developing universal web applications using React and Redux.
- - Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS.
- - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.
- - CLI tool and devDependency for React apps & components and npm modules.
- - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform.
- - StarHackIt: React/Redux + Node full-stack starter kit with authentication and authorization, data backed by SQL.
- - Create an isomorphic React app in less than 5 minutes.
- - Yeoman generator for ReactJS and Webpack.
- - Live editing development on desktop app.
- - Build your react apps with one command and one
npm i
. - - Minimal live-editing boilerplate for your next ReactJS project.
- - Scaffolder of universal Flux / Redux app, backed by Rails API.
- - Modern Application Development Ecosystem.
- - Get started with React, Redux, and React-Router!.
- - A starter project for modern React apps with Redux.
- - Quick packager-agnostic boilerplate for React modules using JSX.
Miscellaneous
- - Complete token authentication system for react + redux that supports isomorphic rendering.
- - Redux bindings for client-side search.
- - An SVG loader component for ReactJS.
- - Alternative syntax for PropTypes.
Utilities
- - DOM like structure that renders to React.
- - A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
- - A <QRCode/> component for use with React.
- A CSS media query component for React.
Framework bindings / integrations
- - ReactJS mixin for easy Firebase integration.
- - React bridge to Famo.us.
- - High performance <canvas> rendering for React components.
- - A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server.
- - A React component which wraps an Elm module to be used in a React application.
- - Render into a three.js canvas using React.
- - OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
- - Open source library for using D3 in React.
- - WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
- - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
- - Backbone-aware mixins for react and a whole lot more.
- - Shockwave Flash Player component for React.
- - Simple componentized localstorage implementation for Facebook's React.
- - Allows to use React.js component as HTML element (web component).
- - Write React components in Elm.
Integrations with Third Party Services
- - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
- - Google analytics component.
- - A react.js reCAPTCHA for Google.
- - Segment.io analytics integration for redux.
Tests
- - Create, isolate and test modular UI components in React.
- - A redux middleware to automatically generate tests for reducers through ui interaction.
- - Chainable, easy to read, React testing library.
- - Plugin for [unexpected]( to enable testing the full React virtual DOM, and also the shallow renderer.
- - Chai.js assertions and convenience functions for testing React Components with enzyme.
- - Lightweight unit test library for ReactJS.
- - JavaScript Testing utilities for React.
- - Write AVA tests for redux pretty quickly.
- - An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
Performance
UI
- - Fast Touch Events for React.
- - Renders static content efficiently by allowing React to short-circuit the reconciliation process.
- - An extremely fast, React-like JavaScript library for building modern user interfaces.
Inspect
- - Puts your console on blast when React is making unnecessary updates.
- - Debug performance of your React application.
- - Render visualizer for ReactJS.
Lazy Load
- - Lazyload your Component, Image or anything matters the performance.
- - A UITableView Inspired list and grid display solution with element culling and smooth animations.
- - A browser-ready efficient scrolling container based on UITableView.
- - A React component which renders a grid of elements.
- - React components for efficiently rendering large lists and tabular data.
- - React component that renders children elements when they enter the viewport.
App Size
- - Remove unnecessary React propTypes from the production build.
- - An implementation of React that optimizes for small script size.
Dev Tools
Redux
- - Another Redux DevTools Monitor.
- - A chart monitor for Redux DevTools.
- - A resizable and movable dock for Redux DevTools monitors.
- - Filterable tree view monitor for Redux DevTools.
- - The default monitor for Redux DevTools with a tree view.
- - Redux DevTools remotely.
- - DevTools for Redux with hot reloading, action replay, and customizable UI.
Inspect
- - Power of Browser DevTools inspectors right inside your React app.
- - React JSON inspector component.
- - A CLI and OS X app for inspecting your React JS and React Native apps.
Miscellaneous
- - The smartest way to share interactive components with your team.
- - JavaScript Standard Style Guide.
- - DX tool for designing truly encapsulated React components.
- - A 'heatpack' command for quick React development with webpack hot reloading.
- - Crafty React and Redux ES6 snippets for Atom Editor.
- - React style guide generator.
Miscellaneous
- - An advanced GUI editor for React.
- - A react renderer for blessed.
- - ReactJS based comic strip creator using fabric.js canvas rendering.
- - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
- - Automatically AJAXify plain HTML with the power of React. It's magic!.
- - A configurable/extendable bash terminal React component.
- - Extract annotated portions of HTML into React components as separate modules.
Static Website Generator
- - Transform plain text into dynamic blogs and websites using React.js.
- - Modern static* website generator based on the React and Webpack ecosystem.
- - Generate websites by composing React components.
转载地址:http://lieni.baihongyu.com/