recently I saw some useful React tool libraries, summed up and shared them with you to avoid duplicating wheels. I hope it will be helpful to you ~
I. basic
1. React Infinite Scroller
React Infinite Scroller is used to load content indefinitely in a React project.
npm address: www.npmjs.com/package/rea...
2. react-dnd
React DnD is a set of React high-level components created by React and Dan Abramov, the core author of Redux, that can help build complex drag-and-drop interfaces while keeping components separate. It is mainly used for drag and drop of components.
npm address: www.npmjs.com/package/rea...
3. react-beautiful-dnd
react-beautiful-dnd is a beautiful and easy-to-use React list drag-and-drop library.
npm address: www.npmjs.com/package/rea...
4. react-icons
using react-icons, you can easily include popular icons in React projects.
npm address: www.npmjs.com/package/rea...
5. react-share
react-share is a React social media sharing button and sharing library.
npm address: www.npmjs.com/package/rea...
6. create-react-app
Create React App is a command line interface tool that allows you to quickly create and run React applications without any configuration.
npm address: www.npmjs.com/package/cre...
7. react-intl
React Intl provides a React component and Mixin for internationalizing React Web applications. It provides a description of formatted date, number, and string messages.
npm address: www.npmjs.com/package/rea...
8. react-router
react-router is a routing solution routing solution for React.js. It can easily synchronize your app and URL while providing first-class support for nesting, transformation, and server rendering.
npm address: www.npmjs.com/package/rea...
9. React Virtualized
react-virtualized is a responsive component that renders large list and table data efficiently and can be used to solve long list rendering problems.
npm address: www.npmjs.com/package/rea...
II. Status management
1. redux
Redux is a JavaScript state container that provides predictable state management. It allows you to build consistent applications that run in different environments (client, server, native applications) and are easy to test.
npm address: www.npmjs.com/package/red...
2. react-redux
React binding library provided officially by Redux. It has the characteristics of high efficiency and flexibility.
npm address: www.npmjs.com/package/rea...
3. MobX
MobX is a time-tested library that makes state management simple and transparent, scalable application functional reactive programming (TFRP).
npm address: www.npmjs.com/package/mob...
4. redux-saga
redux-saga is a library for managing application Side Effect (side effects, such as getting data asynchronously, accessing browser caches, etc.). Its goal is to make side effects management easier, perform more efficiently, test easier, and deal with failures more easily.
npm address: www.npmjs.com/package/red...
5. redux-thunk
Thunk middleware for Redux.
npm address: www.npmjs.com/package/red...
III. Components
1. Ant Design
antd is a React UI component library based on Ant Design design system, which is mainly used to develop enterprise-level middle and background products.
official website address: ant.design/index-cn
2. React Select
React Select is an out-of-the-box Select control.
official website address: react-select.com/home
3. React Hot Toast
React Hot Toast is a popular notification library that contains many notification styles.
official website address: react-hot-toast.com/
4. React Content Loader
React Content Loader can be used to generate list load placeholder components.
official website address: skeletonreact.com/
5. Sweet Alert
Sweet Alert is a pop-up widget that contains many pop-up styles.
official website address: sweetalert.js.org/
6. draftjs
Draft JS is a rich text editor library. Can be seamlessly integrated into React applications.
official website address: draftjs.org/
7. react-slick
React Slick is a React carousel component.
official website address: react-slick.neostack.com/
8. Material-UI
Material-UI is a simple, customizable library of components for building faster, more beautiful, and easier-to-use React applications.
official website address: mui.com/zh/getting- …
9. react-bootstrap
React Bootstrap is a Bootstrap 4 component built by React.
official website address: react-bootstrap.github.io/
10. react-custom-scrollbars
react-custom-scrollbars is a scroll bar component library, which can use scroll bars fluently on web and mobile, and can completely customize
.
npm address: www.npmjs.com/package/rea...
11. react-dropdown
react-dropdown is a simple drop-down component inspired by react-select.
npm address: www.npmjs.com/package/rea...
12. react-horizontal-scrolling-menu
react-horizontal-scrolling-menu is a horizontal scrolling menu component.
npm address: www.npmjs.com/package/rea...
13. react-calendar
react-calendar is a calendar component of React.
npm address: www.npmjs.com/package/rea...
14. react-datepicker
react-datepicker is a date selection component.
npm address: www.npmjs.com/package/rea...
15. react-table
react-table is a powerful table component.
npm address: www.npmjs.com/package/rea...
16. react-awesome-button
react-awesome-button is a library of button components.
npm address: www.npmjs.com/package/rea...
17. react-compound-slider
react-compound-slider is a slider component.
npm address: www.npmjs.com/package/rea...
18. react-checkbox-tree
react-checkbox-tree is a check box component.
npm address: www.npmjs.com/package/rea...
19. recharts
recharts is a React chart library.
npm address: www.npmjs.com/package/rec...
20. react-modal
react-modal is a static animation library component library.
npm address: www.npmjs.com/package/rea...
21. react-responsive-carousel
react-responsive-carousel is a responsive rotational component library.
npm address: www.npmjs.com/package/rea...
22. react-image-lightbox
react-image-lightbox is a component library for displaying pictures.
npm address: www.npmjs.com/package/rea...
23. react-tabs
react-tabs is a tab component.
npm address: www.npmjs.com/package/rea...
24. rebass
Rebass is a React UI toolkit for building responsive WEB applications. It has more than 60 customizable basic components, style separation, and no need to write custom CSS.
official website address: rebassjs.org/
25. react-suite
React Suite is an enterprise-class UI component library built by the backend. It is jointly built by the HYPERS front-end team and the UX team. It has a large number of common components and features, and supports Typescript and Flow, and server rendering.
official website address: rsuitejs.com/
IV, Animation
1. react-spring
react-spring is a react animation library based on spring-physics (Spring Physics). The animation effect is more smooth and natural.
npm address: www.npmjs.com/package/rea...
2. react-motion
react-motion is a powerful react animation library. Npm address: www.npmjs.com/package/rea...
3. react-transition-group
react-transition-group is a library designed specifically for animation.
npm address: www.npmjs.com/package/rea...
4. react-spinner
react-spinner is used to create loading components.
npm address: www.npmjs.com/package/rea...
V, HTTP
1. Axios
Axios is a promise-based HTTP library that can be used in browsers and node.js.
npm address: www.npmjs.com/package/axi...
2. apisauce
apisauce is a http client built on top of axios. Official introduction: Axios + standardized errors + request/response transforms.
npm address: www.npmjs.com/package/api...
3. SuperAgent
SuperAgent is a lightweight Ajax API, which can be used by server (Node.js) client (browser). SuperAgent has the characteristics of low learning curve, easy to use and good readability. It can be used as a client request proxy module. When you want to deal with get,post,put,delete,head requests, you can consider using SuperAgent.
npm address: www.npmjs.com/package/sup...
VI, CSS
1. styled-components
styled-components can use CSS in JavaScript code to style React components. Through this library, you can customize the style of a component, which wraps a given style into a component that can be used directly without the mapping between components and styles, that is, it is a normal React component after creation.
npm address: www.npmjs.com/package/sty...
2. emotion
emotion is an efficient and flexible CSS in the JS library. Based on many other CSS in the JS library, it allows you to quickly style your application using strings or object styles. It has a predictable composition to avoid the particularity of CSS.
npm address: www.npmjs.com/package/emo...
VII. Test
1. @testing-library/react
React Testing Library adds some API based on DOM Testing Library, which is mainly used to test React components. The use of the library does not focus on the internal implementation of the component, but more on testing. The library is based on react-dom and react-dom/test-utils and is a lightweight implementation of both.
npm address: www.npmjs.com/package/@te...
2. Enzyme
Enzyme, from airbnb, is a JavaScript testing tool for React that makes it easy for you to judge, manipulate, and traverse React Components output.
npm address: www.npmjs.com/package/enz...
VIII, form
1. react-hook-form
React Hook Form is a high-performance, flexible, easy-to-expand, easy-to-use form verification library for React Web&Native form validation.
official website address: react-hook-form.com/
2. Formik
Formik is composed of React components and hooks, it has built-in state management operation of the form, there is no need for us to build state for the form separately, and Context is used at the same time, so that the form components can be nested at multiple layers, and we no longer need to pass them layer by layer.
npm address: www.npmjs.com/package/for...
3. react-use-form-state
react-use-form-state is a small React Hook that uses native form input elements to simplify the state of managing forms.
npm address: www.npmjs.com/package/rea...
IX. Custom Hooks
1. use-clippy
use-clippy is a custom React Hook implemented in TypeScript that can be used to read and write to the user's clipboard.
npm address: www.npmjs.com/package/use...
2. react-window-communication-hook
react-window-communication-hook enables communication between browser contexts (windows, tabs, iframes).
npm address: www.npmjs.com/package/rea...
3. react-speech-kit
react-speech-kit is a React hook for in-browser speech recognition and speech synthesis. To put it simply, the voice can be recognized as text and the text can be synthesized into speech.
npm address: www.npmjs.com/package/rea...
4. react-script-hook
react-script-hook is a hook for dynamically loading (and notifying) external scripts.
npm address: www.npmjs.com/package/rea...
5. use-mouse-action
use-mouse-action is a library with three React hook that listens for mouse events on elements or JSX elements. Including mouse operation, mouse press, mouse lift event.
npm address: www.npmjs.com/package/use...
6. @rehooks/online-status
@ rehooks/online-status is used to check the network status to determine if the user is connected to the network.
npm address: www.npmjs.com/package/@re...
7. @rehooks/document-title
@ rehooks/document-title is used to update the page title (displayed in the browser's tab).
npm address: www.npmjs.com/package/@re...
8. useHooks
Custom hook library, which contains many useful Hooks.
official website address: usehooks.com/
9. react-hanger
react-hanger is a custom React Hooks library that contains many useful custom hooks.
npm address: www.npmjs.com/package/rea...