60 + practical React tool library to help you develop efficiently!

May 4, 2023 1551hotness 0likes 0comments

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...