frm https://github.com/sheep0704/awesome-react-components-all
有兴趣的可以关注【Python2048】 公众号.
分享技术、灰色产业、职业规划、赚钱之道、逆向破解等趣事……
有兴趣的可以关注【Python2048】 公众号.
分享技术、灰色产业、职业规划、赚钱之道、逆向破解等趣事……
awesome-react-components-all
Catalog of React components / libraries / React 学习大全 -> KARL-Dujinyang
Lang -> 2016 React动态更新
Karl-dujinyang -> React大全,Star,Fork备用。
React Components Catalog
Catalog of React components / libraries
- Dedicated interface at
devarchy.com/react-components
- Contributions welcome, see contribution guide
Contents
- UI Components
- UI Layout
- UI Animation
- UI Frameworks
- UI Utilites
- Code Design
- Utilities
- Tests
- Performance
- Dev Tools
- Miscellaneous
UI Components
Table / Data Grid
- reactable - Fast, flexible, and simple data tables in React.
- ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- griddle-react - Simple Grid Component written in React.
- react-datagrid - A carefully crafted DataGrid for React.
- react-data-components - React components for sorting, filtering and pagination of data.
- react-bootstrap-table - It's a react table for bootstrap.
- react-data-grid - Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like.
- react-pivot - React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
- autoresponsive-react - Auto Responsive Layout Library For React.
Infinite Scroll
- react-lazyload - Lazyload your Component, Image or anything matters the performance.
- react-infinity - A UITableView Inspired list and grid display solution with element culling and smooth animations.
- react-infinite - A browser-ready efficient scrolling container based on UITableView.
- react-infinite-grid - A React component which renders a grid of elements.
- react-list - A versatile infinite scroll React component.
- react-virtualized - React components for efficiently rendering large lists and tabular data.
Modals
Display overlay / modal / dialog
- react-dock - Resizable dockable react component.
- react-overlays - Utilities for creating robust overlay components.
- boron - A collection of dialog animations with React.js.
- react-modal2 - Simple modal component for React.
- react-modal - Accessible modal dialog component for React.
- react-skylight - A react component for modals and dialogs.
- rodal - A React modal with animations.
Notification
A temporary little modal to notify the user
- react-notification-system - A complete and totally customizable component for notifications in React.
- react-notification - Snackbar notifications for React.
- react-s-alert - Alerts / Notifications for React with rich configuration options.
- react-crouton - A message component for reactjs.
Tooltips
- react-tooltip - React tooltip component.
- rc-tooltip - React Tooltip.
Menu
Menus / Sidebars
- react-burger-menu - An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations.
- react-sidebar - A sidebar component for React.
- react-motion-menu - Motion menu component powered by React Motion.
- react-offcanvas - Off-canvas menus for React.
- react-tree-menu - A stateless tree menu component for React.
- react-metismenu - A ready-to-use menu component for React.
Sticky
Implementations similar to
position: sticky
- react-sticky -
component for awesome React apps. - react-headroom - Hide your header until you need it.
- react-listview-sticky-header - React listview with sticky section header.
Tabs
- react-tabs - React tabs component.
- react-simpletabs - Just a simple tabs component built with React.
Loading / Progress Indicators
Let the user know that something is being loaded
- halogen - A collection of loading spinners with React.js.
- react-ladda - React wrapper for Ladda buttons.
- react-progress-button - Simple react.js component for an inline progress indicator.
- react-loader - React component that displays a spinner via spin.js until your component is loaded.
- react-spinkit - A collection of loading indicators animated with CSS for React.
- react-progress-label - Progress label component.
Carousels
- react-slick - React carousel component.
Collapse
- react-collapse - Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height.
Charts
Displays data in graphs / diagrams
- react-chartist - React component for Chartist.js.
- d3-react-squared - Lightweight event system for (d3) charts and other components for ReactJS.
- react-d3-components - D3 Components for React.
- recharts - Redefined chart library built with React and D3.
- react-chartjs - Common react charting components using chart.js.
- react-dazzle - Dashboards made easy in React JS.
- react-vis - Data visualization library based on React and d3.
- react-sparkline - React component for rendering simple sparklines.
- react-sparklines - Beautiful and expressive Sparklines React component.
- rumble-charts - React components for building composable and flexible charts.
- react-micro-bar-chart - React component for micro bar-charts rendered with D3.
Display a Tree Data Structure
- react-treeview - Easy, light, flexible tree view made with React.
- react-ui-tree - React tree component.
- react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
UI Navigation
Ways to navigate views
- react-scroll - React scroll component.
- react-swipe-views - A React Component for binded Tabs and Swipeable Views.
Custom Scrollbar
- react-custom-scrollbars - React scrollbars component.
- react-scrollbar - Scrollbar component for React.
- react-smooth-scrollbar - React implementation of smooth-scrollbar.
- react-gemini-scrollbar - React component for custom overlay-scrollbars with native scrolling mechanism.
- react-custom-scroll - Easily customize the browser scroll bar with native OS scroll behavior.
Media
Audio / Video
- react-player - A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo.
- react-youtube - React.js powered YouTube player component.
- react-soundplayer - Create custom SoundCloud players with React.
- react-video - React component to load video from Vimeo or Youtube across any device.
- react-music - Make beats with React.
- react-dailymotion - Dailymotion player component for React.
Map
- react-gmaps - A Google Maps component for React.js.
- google-map-react - Universal google map react component, allows render react components on the google map.
- react-googlemaps - A declarative React interface to Google Maps.
- react-leaflet - React components for Leaflet maps.
- react-geosuggest - A React autosuggest for the Google Maps Places API.
- react-map-gl - A React wrapper for MapboxGL-js and overlay API.
Display time / date / age
- react-time - Component for React to render relative and/or formatted dates into
- react-timeago - A simple time-ago component for ReactJs.
Photo / Image Gallery
- react-image-gallery - Responsive image gallery, carousel, image slider react component.
- react-images - A simple lightbox component for displaying an array of images.
- react-photo-gallery - Responsive React Photo Gallery.
Touch Swipe
- react-swipe - Swipe.js as a React component.
Miscellaneous
- react-timesheet - Time Sheet Component for React.
- react-intl - Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
- react-blur - React component for blurred backgrounds.
- react-markdown - Render Markdown as React components.
- react-split-pane - React split-pane component.
- typography - A powerful toolkit for building websites with beautiful typography.
- react-paginate - A ReactJS component that creates a pagination.
- react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
- react-icons - Svg react icons of popular icon packs using ES6 imports.
- react-emoji - An emoji mixin for React.
- react-resizable-and-movable - Resizable and movable component for React.
- react-dnr - Dragable and Resizable window build with React.js.
- react-resizable-box - Resizable component for React. #reactjs.
- react-file-reader-input - React file input component for complete control over styling and abstraction from file reading.
- react-star-rating - A simple star rating component built with React.
- react-star-rating-input - React.js component for entering 0-5 (or more) stars.
- react-pagespeed-score - A React component for display a dial-type chart of PageSpeed Insights.
- react-autolink - An autolink mixin for React.
Component Collections
- dataminr-react-components - Collection of reusable React Components and utility functions.
- react-components - React components used by Khan Academy.
Form Components
Let the user enter data
Date / Time picker
- react-date-picker - A carefully crafted date picker for React.
- react-datepicker - A simple and reusable datepicker component for React.
- rc-calendar - React Calendar.
- react-date-range - A React component for choosing dates and date ranges.
- react-day-picker - Flexible date picker for React.
- react-daterange-picker - A React based date range picker.
- react-yearly-calendar - React.js Yearly Calendar Component.
- react-calendar - A modular toolkit to build calendar-related things in React.
- input-moment - React datetime picker powered by momentjs.
- react-datetime - A lightweight but complete datetime picker react component.
- react-bootstrap-datetimepicker - A react.js datetime picker for bootstrap.
- react-bootstrap-daterangepicker - A date/time picker for react (using bootstrap). This is a react port of bootstrap-daterangepicker.
- react-big-calendar - Gcal/outlook like calendar component.
- react-date-select - A React Date Select / Picker Input Component.
- react-infinite-calendar - Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.
Rich Text Editing
- react-quill - A Quill component for React.
- react-ace - React Ace Component.
- react-contenteditable - React component for a div with editable contents.
- react-codemirror - Codemirror Component for React.js.
- react-medium-editor - React wrapper for medium-editor.
- draft-js - A React framework for building text editors.
- ritzy - Collaborative web-based rich text editor.
Sortable List
Let the user define an order on a list
- sortablejs - 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.
- react-anything-sortable - A ReactJS component that can sort any children with touch support and IE8 compatibility.
- react-sortable-hoc - A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.
- react-sortable - A sortable list component built with React.
Drag and Drop
- react-draggable - React draggable component.
- react-dnd-touch-backend - Touch Backend for react-dnd.
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- react-dnd - Drag and Drop for React.
- react-sortable-pane - Sortable and resizable pane component for React.
Autocomplete
Autosuggest / autocomplete / typeahead
- react-autosuggest - WAI-ARIA compliant React autosuggest component.
- react-typeahead - Pure react-based typeahead and typeahead-tokenizer.
- react-typeahead-component - Typeahead, written using the React.js library.
Select
- react-selectize - A Stateless & Flexible Select component for React inspired by Selectize.
- react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button.
- react-select - A Select control built with and for React JS.
- react-select-box - An accessible select box component for React.
Color Picker
- react-input-color - React input color component with hsv color picker.
- react-color - Color Pickers from Sketch, Photoshop, Chrome & more.
Toggle
- react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
- react-ios-switch - React switch component.
Slider
- rc-slider - React Slider.
- react-slider - Slider component for React.
Radio buttons
- react-radio-group - Better radio buttons.
Type Select
Let the user select a tag / something while typing
- react-tagsinput - A simple react component for inputing tags.
- react-tag-input - A fantastically simple tagging component for your React projects.
- react-mentions - Mention people in a textarea.
- react-tokeninput - Tokeninput component for React.
Masked Input
- react-input-mask - Yet another react component for input masking.
- react-maskedinput - Masked React component.
- react-text-mask - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
Autosize Input / Textarea
- react-input-autosize - Auto-resizing input field for React.
- react-textarea-autosize -