Component library
| The package name | role |
|---|---|
| antd | React based UI component framework |
| @ant-design/pro-* | Antd Pro series advanced components |
| antd-mobile@next | React based mobile component framework |
| umi | Plug-in – level front-end application framework |
| @material-ui/core | Faster and easier mobile Web development |
| @chakra-ui/react | Simple, modular, and accessible UI components for React applications |
| @douyinfe/semi-ui | Modern, comprehensive, flexible design system and React UI library |
| @jetbrains/ring-ui | A collection of JetBrains Web UI components |
| bfd-ui | Enterprise React component library |
| react-bootstrap | Bootstrap UI library, based on react version |
| react-weui | Weui UI library, based on react version |
| zarm | React, React-Native mobile UI component library |
The rich text
| The package name | role |
|---|---|
| amis-editor | AMis visual editing tool |
| braft-editor | Easy to use React rich text editor, based on draft-JS development |
| braft-utils | Braft-editor utility kit |
| react-live | Used to edit the React component in real time |
| component-playground | Component for rendering the React component with editable source and live preview |
| draft-js | The React framework for building highly customized out-of-the-box rich text editors |
| gg-editor | G6 and React based visual graphics editor |
| react-ace | Code editor |
| react-code-view | Components that can edit and render Markdown files in real time |
| react-codemirror | Codemirror Component for React.js, rich text editor |
| react-json-view | JSON viewer |
| react-quill | Rich text editor |
| react-simple-code-editor | Simple and concise code editor with syntax highlighting |
| slate | Highly customizable rich text editor |
| slate-react | The React component renders the Slate editor |
The media
| The package name | role |
|---|---|
| griffith | React based Web video player |
| react-audio-player | Simple React wrapper on HTML5 audio tags |
| video-react | Web video player built for the HTML5 world using the React library |
Animation processing
| The package name | role |
|---|---|
| react-motion | React animation solution |
| react-transition-group | An easy way to animate the React component when it enters or leaves the DOM |
Website interaction
| The package name | role |
|---|---|
| chart-race-react | React’s seamless bar chart competition component |
| react-tagsinput | React you can enter the tag control tags INPUT |
| react-tag-input | A very simple tag component for your React project |
| react-tabs | The React TAB switches components |
| react-table | Build the Table table component using hooks |
| formik | Easy to build forms in React |
| rc-form | React form validation component |
| react-hook-form | React Hooks for form validation (Web + React Native) |
| react-input-autosize | Make input automatically change with your text content |
| react-textarea-autosize | React allows textarea to vary in size with the content |
| prism-react-renderer | Render the highlighted Prism output to React (+ theming and Vendor Prism) |
| react-highlight-words | Text highlighting component |
| qrcode.react | A React component is used to generate the QR code |
| react-qrbtf | Art TWO-DIMENSIONAL code Generator |
| react-beautiful-dnd | Use React to easily and aesthetically drag and drop lists |
| react-dnd | React Drags and drops components into the table |
| react-dnd-html5-backend | React DnD HTML5 backend is officially supported |
| react-draggable | React drags or drags components |
| react-sortable-hoc | A high-order component that animates any list, a sortable list that is accessible and easy to touch |
| react-rnd | Resizable and draggable React components |
| react-resizable | React resizes components |
| react-filepond | The React version of Filepond is used for file fragment upload |
| react-color | Color pickers from Sketch, Photoshop, Chrome, Github, Twitter, and more |
| react-copy-to-clipboard | Copy to the React component of the clipboard |
| react-helmet | HTML page header document tag management component |
| react-document-title | React declarative, nested, stateful, isomorphic document.title |
| react-text-loop | Animate the words in the title |
| react-infinite-scroller | React infinite scroll component in ES6 |
| react-list | Multifunctional infinite scrolling React component |
| react-scroll | React scroll component |
| react-virtualized | React Virtual scroll component |
| react-window | The React component effectively renders large list and table data, virtual scrolling |
| react-photo-view | React image preview is an elegant component |
| react-viewer-mobile | Mobile image viewer |
| react-zmage | React – a scalable image control |
| react-sticky | component for awesome React apps |
| react-use-hover | Determines whether to include the React element hover |
utility
| The package name | role |
|---|---|
| ahooks | Antd React Hooks library |
| react-use | Use React Hooks |
| use-merge-value | Hooks for merging the value of props and its own value |
| react-useportal | Provides a first-class way to render child components to DOM nodes that exist outside the parent component’s DOM hierarchy |
| use-debounce | React dejitter hook |
| use-media | Use the Media React hook to track the CSS Media query status |
| react-query | React hooks that fetch, cache, and update asynchronous data |
| use-http | React hook for making homogeneous HTTP requests |
| swr | React Hooks for remote data retrieval |
| @loadable/component | The recommended React code split library |
| react-async-component | React Loads components asynchronously |
| react-lazy-load-image-component | Image lazy loading component |
| react-lazyload | Lazy loading of your components, images, or anything else that is important for performance |
| react-loadable | Used to load higher-order components with dynamically imported components |
| polished | A lightweight toolset for writing JavaScript styles |
| classnames | A simple javascript utility that joins classNames together conditionally |
| clsx | Miniature utility for conditionally constructing a className string |
| styled-components | Better CSS styling in components |
| html-react-parser | HTML to React parser |
| jsx-transform | JSX syntax converter |
| react-jsx-parser | A React component that parses JSX and outputs rendered React components |
| prop-types | The runtime type checks React items and similar objects |
| react-activation | Real <KeepAlive /> for React |
| react-keep-alive | Maintains component state and avoids repeating re-rendered components |
| react-dom | React DOM rendering library |
| react-router | React Routing navigation core library |
| react-router-config | The React Router configures the helper for static routes |
| react-router-dom | React Route navigation library |
| react-router-transition | Animated filtering transformations built for the React-Router, supported by React-Motion |
| react-height | Measuring assembly height |
| react-intl | Formatjs is a set of libraries that help you set up internationalization in any project, whether it’s React or not |
State management
| The package name | role |
|---|---|
| constate | React Context + State |
| connected-react-router | React Router V4 Redux binding |
| redux | State publish subscription library |
| react-redux | React Status manager |
| redux-immutable | Use to create the equivalent function of Redux combineReducers used with the Immutable. Js state |
| redux-logger | Redux development environment logging middleware |
| redux-persist | Redux persistent storage |
| redux-saga | Redux middleware that focuses on asynchronous logic |
| redux-thunk | Redux middleware that handles asynchronous logic |
| reselect | Redux intermediate handler to resolve component recalculation with each update |
| mobx | Simple, extensible state management |
| mobx-react | Mobx state manager |