awesome-react
React 资源大全中文版。An awesome React packages and resources
https://github.com/huaize2020/awesome-react
Last synced: 10 days ago
JSON representation
-
Boilerplate
-
Solution
- create-react-app - Create React apps with no build configuration. 
- generator-starhackit - Full-stack starter kit. 
- react-boilerplate - A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices. 
- electron-react-boilerplate - Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.
-
-
Dev Tools
-
Debug
- react-dev-inspector - Jump to local IDE code directly from browser React component by just a simple click. 
-
Performance
- @welldone-software/why-did-you-render - why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) 
-
Test
- react-testing-library - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices. 
- react-hooks-testing-library - Simple and complete React hooks testing utilities that encourage good testing practices. 
- ui-harness - Create, isolate and test modular UI components in React. 
- react-unit - Lightweight unit test library for ReactJS. 
- unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer. 
- 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. 
- jest - Delightful JavaScript Testing. 
- chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme. 
- enzyme - JavaScript Testing utilities for React. 
-
-
Official
-
Static Site Generator & Documentation Generator & Blogging
-
Parallax
- gatsby - Build blazing fast, modern apps and websites with React. 
- Docusaurus - Easy to maintain open source documentation websites. 
- react-static - A progressive static site generator for React. 
- dumi - 📖 Documentation Generator of React Component. 
- component-controls - A next-generation tool to create blazing-fast documentation sites. 
-
-
UI Animation
-
GraphQL
- react-tsparticles - A lightweight component to easily create interactive particles animations. 
- react-motion - A spring that solves your animation problems. 
- react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. 
- react-flip-toolkit - A lightweight magic-move library for configurable layout transitions. 
- react-animations - A collection of animations for inline style libraries, React-animations implements all animations from animate.css. 
- react-router-transition - Transitions built for react-router, powered by react-motion. 
- react-reveal - Easily add reveal on scroll animations to your React app. 
- react-gsap-enhancer - Use the full power of React and GSAP together. 
- data-driven-motion - Easily animate your data. 
- gooey-react - The gooey effect for React, used for shape blobbing / metaballs. 
- react-particles-bg - Particles backgrounds. 
- react-mt-svg-lines - Wrapper to animate the line stroke in SVGs. 
- react-spark-scroll - Scroll-based actions and animations for react. 
- react-track - Track the position of DOM elements. Create cool animations. 
- tween-one - Animate One React Element. 
- react-web-animation - React components for the Web Animations API -. 
- react-transitive-number - Apply transition effect to numeric strings, a la old Groupon timers. 
- react-tweenful - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions. 
- auto-size-transition - A component that scale dynamically according to the internal children size. 
- velocity-react - Velocity.js wrapper. 
- react-anime - A super easy animation library. 
- react-spring - A spring physics based animation library. 
- framer-motion - An animation and gesture library. 
-
Parallax
- react-parallax - A React Component for parallax effect. 
- react-parallax-tilt - Easily apply parallax tilt hover effect on components. 
- react-parallax-component - Easiest way to add scroll parallax effect on the component. 
-
-
UI Components
-
Audio / Video
- react-player - A react component for playing a variety of URLs, including YouTube. 
- video-react - A web video player built for the HTML5 world using React library. 
- react-audio-player - A simple React wrapper on the HTML5 audio tag. 
- material-ui-audio-player - Audio player for material ui design. 
- react-dailymotion - Dailymotion player component for React. 
- react-youtube - React.js powered YouTube player component. 
- react-soundplayer - Create custom SoundCloud players with React. 
-
Buttons
- react-awesome-button - 3D animated 60fps buttons with load progress and social share actions. 
- reactive-button - A beautiful animated button component with progress indicator. 
-
Canvas
- react-konva - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework. 
- @excalidraw/excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams. 
- react-sketch - A Sketch tool for React based applications, backed-up by FabricJS. 
- react-sketch-canvas - Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets. 
- react-design-editor - React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs. 
-
Carousel
- react-slick - React carousel component. 
- keen-slider - Performant carousel/slider with native touch/swipe behavior. 
- react-awesome-slider - 3D animated 60fps media and content slider/carousel. 
- react-responsive-carousel - React.js Responsive Carousel (with Swipe). 
- 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 - A slider component with pinch to zoom capabilities inspired by Instagram. 
- @egjs/react-flicking - It's reliable, flexible and extendable carousel. 
-
Collapse
- react-collapse - Component-wrapper for collapse animation with react-motion. 
- react-accessible-accordion - Accessible Accordion component for React. 
- react-tabbordion - [demo](https://merri.github.io/react-tabbordion) - Tabbordion is a component for managing active state between multiple items. You can make anything out of it: Tabs component, Accordion component, Multi select list component,Option component, List of options, List of checkboxes. 
-
Custom Scrollbar
- react-custom-scroll - Easily customize the browser scroll bar with native OS scroll behavior. 
- rc-scrollbars - React scrollbars component. 
- react-shadow-scroll - Component that customizes the list and inserts shadow when scrolling exist. 
-
Data Visualization
- ej2-react-charts - Beautiful and interactive charts & graphs for react. 
- recharts - Redefined chart library built with React and D3. 
- visx - 🐯 visx | visualization components. 
- nivo - Provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries. 
- victory - Data viz for React. 
- react-vis - Data visualization library based on React and d3. 
- BizCharts - Powerful data visualization library based on G2 and React. 
- echarts-for-react - Apache ECharts components for React wrapper. 
- react-sparklines - Beautiful and expressive Sparklines React component. 
- semiotic - Semiotic is a data visualization framework for React. 
- react-d3-components - D3 Components for React. 
- react-dazzle - Dashboards made easy in React JS. 
- react-highcharts - React-highcharts. 
- react-google-charts - React-google-charts React component. 
- react-timeseries-charts - Declarative timeseries charts. 
- react-chartist - React component for Chartist.js. 
- rumble-charts - React components for building composable and flexible charts. 
- react-charty - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming. 
- react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. 
- react-muze - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly) 
- graphin - A React toolkit for graph visualization based on G6. 
- react-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. 
- react-leaflet - React components for Leaflet maps. 
- pigeon-maps - ReactJS Maps without external dependencies. 
- react-mapbox-gl - A React binding of mapbox-gl-js. 
- react-geosuggest - A React autosuggest for the Google Maps Places API. 
- react-svg-map - A set of components to display an interactive SVG map. 
- gantt-for-react - Frappe Gantt components for React wrapper. 
- @ant-design/charts - A React chart library, based on G2Plot, G6, X6, L7. 
- chartify - React.js plugin for building animated draggable and customizable charts. 
- react-map-gl - A React wrapper for MapboxGL-js and overlay API. 
- react-chartjs-2 - Common react charting components using Chart.js 2.0. 
- google-map-react - Universal google map react component, allows render react components on the google map. 
-
Device Input/User Action
- react-spaces - Nestable resizable, anchored, scrollable components. 
- react-keydown - Lightweight keydown wrapper for React components. 
- react-key-handler - React component to handle keyboard events. 
- react-shortcuts - Manage keyboard shortcuts from one place. 
- useKeyCapture - A custom hook to ease the key-press listeners of a target/global. 
- react-scroll-components - A set of components that react to page scrolling. 
- react-swipe - Swipe.js as a React component. 
- react-fastclick - Fast Touch Events for React. 
- react-aim - Determine the cursor aim for triggering mouse events. 
- react-hook-mighty-mouse - Hook that tracks mouse events on selected element. 
- react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React. 
- react-movable - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables. 
- react-dragula - Drag and drop so simple it hurts. 
- react-sortable-pane - Sortable and resizable pane component for React. 
- re-resizable - A resizable component for React. 
- react-sizeme - Make your React Components aware of their width and height! 
- react-dropzone - Simple HTML5 drag-drop zone with React.js. 
- react-resizable-and-movable - A resizable and draggable component for React. 
- react-resizable - A simple React component that is resizable with a handle. 
- react-dnd - Drag and Drop for React. 
- react-draggable - React draggable component. 
-
Dialog/Modal/Alert
- react-modal - Accessible modal dialog component for React. 
- react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. 
- react-skylight - A react component for modals and dialogs. 
- nice-modal-react - A nice modal manager for React. 
- sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content. 
- reoverlay - The missing solution for managing modals. 
- reboron - A collection of dialog animations with React.js. 
-
Editable data grid / spreadsheet
- revo-grid - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization. 
- ReactGrid - Add spreadsheet-like behavior to your app. 
- gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. 
- ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. 
-
Form Components
- formik - Build forms without tears and supports Validation in ease. 
- react-hook-form - React hooks for form validation without the hassle. 
- interweave-emoji-picker - A React based emoji picker powered by Interweave and Emojibase. 
- slate - A completely customizable framework for building rich text editors. 
- devextreme-reactive - High-performance plugin-based scheduler/calendar for Material Design. 
- redux-form - Redux form state management (Web and Native). 
- react-final-form - Subscription-based form state management. 
- formily - High performance, extensible, and Typescript friendly. 
- surveyjs - The advanced Survey and Form library. 
- formsy-react - A form input builder and validator for React JS. 
- react-validation-mixin - Simple validation mixin (HoC) for React. 
- react-input-mask - Yet another react component for input masking. 
- react-maskedinput - Masked <input/> React component. 
- react-payment-inputs - A zero-dependency container to help with payment card input fields. 
- react-numpad - Extensible number pad control for numbers, dates and times. 
- react-autosuggest - WAI-ARIA compliant React autosuggest component. 
- react-typeahead - Pure react-based typeahead and typeahead-tokenizer. 
- react-autocomplete-input - Autocomplete input field for React. 
- react-input-autosize - Auto-resizing input field for React. 
- react-tagsinput - A simple react component for inputing tags. 
- react-tokeninput - Tokeninput component for React. 
- @pathofdev/react-tag-input - Minimal tagging component with editable tags 
- react-select - A Select control built with and for React JS. 
- react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button. 
- react-select-box - An accessible select box component for React. 
- react-functional-select - Micro-sized & micro-optimized select component for React.js. 
- react-column-select - A column select component built for react. 
- react-radio-group - Better radio buttons. 
- react-star-rating-input - React.js component for entering 0-5 (or more) stars. 
- react-awesome-stars-rating - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility. 
- react-ios-switch - React switch component. 
- react-datepicker - A simple and reusable datepicker component for React. 
- react-day-picker - Flexible date picker for React. 
- react-calendar - Ultimate calendar for your React app. 
- react-nice-dates - A responsive, touch-friendly, and modular date picker library. 
- react-date-picker - A date picker for your React app. 
- react-yearly-calendar - React.js Yearly Calendar Component. 
- react-datepicker2 - A simple and reusable datepicker component (with persian jalali calendar support). 
- date-range-picker - A calendar component that supports date, range & ranges picks. 
- react-simple-timefield - Simple time input field. 
- react-timezone-select - Dynamic, succinct timezone select. Based on `react-select`. 
- emoji-mart - Emoji Mart is a customizable emoji picker HTML component for the web. 
- react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component. 
- coloreact - A tiny Color Picker for React. 
- react-color - Is a tiny color picker widget component for React apps. 
- sortablejs - Lists reorderable by drag-and-drop, within and among lists. 
- react-anything-sortable - Sort any children with touch support and IE8 compatibility. 
- react-sortable - A sortable list component built with React. 
- react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). 
- react-quill - Quill wrapper. 
- braft-editor - A web rich text editor based on draft-js, suitable for React framework, compatible with mainstream modern browsers. 
- alloyeditor - WYSIWYG editor based on CKEditor with completely rewritten UI. 
- remirror - ProseMirror toolkit for React. 
- react-contenteditable - React component for a div with editable contents. 
- megadraft - Rich Text editor built on top of draft.js. 
- edtr-io - WYSIWYG in-line web editor with plugins. 
- react-medium-editor - medium-editor wrapper. 
- ckeditor5-react - An official CKEditor 5 rich text editor wrapper. 
-
Programming Languages
Categories
Sub Categories
Form Components
91
style
36
Data Visualization
33
GraphQL
24
Device Input/User Action
21
State Management
12
Layout
11
Photo / Image
10
Test
10
Notification
8
Carousel
8
Table
8
Parallax
8
Dialog/Modal/Alert
7
Router
7
Audio / Video
7
Solution
7
Infinite Scroll / Virtualized List / Virtualized Tree
6
Loader
6
Viewer
5
i18n
5
Canvas
5
Menu
4
Editable data grid / spreadsheet
4
Hooks Collection
4
Icons
4
Tree
3
Paginator
3
Sticky
3
Custom Scrollbar
3
Collapse
3
Buttons
2
Tooltip
2
Lazy Load
2
Tabs
2
Time / Date / Age
2
Mobile
2
Navigation
2
Guided Tours
1
Performance
1
Debug
1
Keywords
react
225
javascript
50
reactjs
44
react-components
36
react-component
33
typescript
32
component
25
components
14
ui
14
animation
11
react-hooks
11
svg
11
ui-components
10
grid
10
design-system
10
react-native
10
visualization
10
redux
9
table
9
chart
9
editor
9
hooks
9
component-library
8
drag-and-drop
8
calendar
8
charts
8
angular
7
vue
7
data-visualization
7
css
7
form
7
d3
6
canvas
6
carousel
6
material-ui
6
ant-design
6
material
5
toast
5
toast-notifications
5
mobile
5
datatable
5
bootstrap
5
map
5
layout
5
forms
5
datagrid
5
sortable
5
notifications
5
vuejs
4
drag
4