├── Demo ├── chakra-ui.png ├── email-js.png ├── formilk.jpg ├── framer-motion.png ├── material-ui.png ├── react-calender.jpg ├── react-drag-drop-files.png ├── react-icons.png ├── react-image-file-resizer.png ├── react-leaflet.png ├── react-mantine.png ├── react-pdf.jpg ├── react-popup.png ├── react-query.png ├── react-responsive-carousel.jpg ├── react-router-dom.png ├── react-select.png ├── react-table.png ├── recharts.png └── video-react.png └── README.md /Demo/chakra-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/chakra-ui.png -------------------------------------------------------------------------------- /Demo/email-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/email-js.png -------------------------------------------------------------------------------- /Demo/formilk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/formilk.jpg -------------------------------------------------------------------------------- /Demo/framer-motion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/framer-motion.png -------------------------------------------------------------------------------- /Demo/material-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/material-ui.png -------------------------------------------------------------------------------- /Demo/react-calender.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-calender.jpg -------------------------------------------------------------------------------- /Demo/react-drag-drop-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-drag-drop-files.png -------------------------------------------------------------------------------- /Demo/react-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-icons.png -------------------------------------------------------------------------------- /Demo/react-image-file-resizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-image-file-resizer.png -------------------------------------------------------------------------------- /Demo/react-leaflet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-leaflet.png -------------------------------------------------------------------------------- /Demo/react-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-mantine.png -------------------------------------------------------------------------------- /Demo/react-pdf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-pdf.jpg -------------------------------------------------------------------------------- /Demo/react-popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-popup.png -------------------------------------------------------------------------------- /Demo/react-query.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-query.png -------------------------------------------------------------------------------- /Demo/react-responsive-carousel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-responsive-carousel.jpg -------------------------------------------------------------------------------- /Demo/react-router-dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-router-dom.png -------------------------------------------------------------------------------- /Demo/react-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-select.png -------------------------------------------------------------------------------- /Demo/react-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/react-table.png -------------------------------------------------------------------------------- /Demo/recharts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/recharts.png -------------------------------------------------------------------------------- /Demo/video-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/5df13fb2e0e55ab189b513904cd6c48045e27dc9/Demo/video-react.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 22 React Libraries Every React Developer Should Have 2 | 3 | You can't become React developer by just writing all the software with the React alone but you've to use all the amazing React libraries that well-tested and maintained by other developers. 4 | 5 | Enjoy guys. 6 | 7 | ## Authors 8 | 9 | - [@arkarWebDev](https://www.github.com/arkarwebdev) 10 | 11 | ## chakra-ui 12 | 13 | ![Web Screenshot](https://raw.githubusercontent.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/master/Demo/chakra-ui.png) 14 | 15 | Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. 16 | 17 | Offical Website 18 | 19 | https://chakra-ui.com/ 20 | 21 | ## email.js 22 | 23 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/email-js.png?raw=true) 24 | 25 | Send Email Directly From JavaScript. No server code needed. 26 | 27 | Offical Website 28 | 29 | https://www.emailjs.com/ 30 | 31 | ## formilk 32 | 33 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/formilk.jpg?raw=true) 34 | 35 | Formik is the world's most popular open source form library for React and React Native. 36 | 37 | Offical Website 38 | 39 | https://formik.org/ 40 | 41 | ## framer motion 42 | 43 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/framer-motion.png?raw=true) 44 | 45 | A production-ready motion library for React. 46 | 47 | Offical Website 48 | 49 | https://www.framer.com/motion/ 50 | 51 | ## material-ui 52 | 53 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/material-ui.png?raw=true) 54 | 55 | MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components. 56 | 57 | Offical Website 58 | 59 | https://mui.com/ 60 | 61 | ## react-calender 62 | 63 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-calender.jpg?raw=true) 64 | 65 | Ultimate calendar for your React app. 66 | 67 | Offical Website 68 | 69 | https://projects.wojtekmaj.pl/react-calendar/ 70 | 71 | ## drag-and-drop-files 72 | 73 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-drag-drop-files.png?raw=true) 74 | 75 | Light and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window. 76 | 77 | Offical Website 78 | 79 | https://www.npmjs.com/package/react-drag-drop-files 80 | 81 | ## react-icons 82 | 83 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-icons.png?raw=true) 84 | 85 | Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. 86 | 87 | Offical Website 88 | 89 | https://react-icons.github.io/react-icons 90 | 91 | ## react-image-file-resizer 92 | 93 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-image-file-resizer.png?raw=true) 94 | 95 | You can change image's width, height, format, rotation and quality.It returns resized image's new base64 URI or Blob. The URI can be used as the source of an component. 96 | 97 | Offical Website 98 | 99 | https://www.npmjs.com/package/react-image-file-resizer 100 | 101 | ## react-leaflet 102 | 103 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-leaflet.png?raw=true) 104 | 105 | React components for Leaflet maps. 106 | 107 | Offical Website 108 | 109 | https://react-leaflet.js.org/ 110 | 111 | ## react-mantine 112 | 113 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-mantine.png?raw=true) 114 | 115 | Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 40 hooks to cover you in any situation 116 | 117 | Offical Website 118 | 119 | https://mantine.dev/ 120 | 121 | ## react-pdf 122 | 123 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-pdf.jpg?raw=true) 124 | 125 | Easily display PDF in your React app. 126 | 127 | Offical Website 128 | 129 | https://projects.wojtekmaj.pl/react-pdf/ 130 | 131 | ## react-popup 132 | 133 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-popup.png?raw=true) 134 | 135 | Simple React popup component that help you create simple and complex Modals, Tooltips and Menus for your React App. 136 | 137 | Offical Website 138 | 139 | https://react-popup.elazizi.com/ 140 | 141 | ## react-query 142 | 143 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-query.png?raw=true) 144 | 145 | Performant and powerful data synchronization for React. Fetch, cache and update data in your React and React Native applications all without touching any "Global State". 146 | 147 | Offical Website 148 | 149 | https://react-query-v3.tanstack.com/ 150 | 151 | ## react-responsive-carousel 152 | 153 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-responsive-carousel.jpg?raw=true) 154 | 155 | Responsive carousels for react. 156 | 157 | Offical Website 158 | 159 | http://react-responsive-carousel.js.org/ 160 | 161 | ## react-router-dom 162 | 163 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-router-dom.png?raw=true) 164 | 165 | React Router Dom that enables CSR ( Client Side Routing ) . 166 | 167 | Offical Website 168 | 169 | https://reactrouter.com/en/main 170 | 171 | ## react-select 172 | 173 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-select.png?raw=true) 174 | 175 | A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support. 176 | 177 | Offical Website 178 | 179 | https://react-select.com/home 180 | 181 | ## react-table 182 | 183 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/react-table.png?raw=true) 184 | 185 | Lightweight and extensible data tables for React. Build and design powerful datagrid experiences while retaining 100% control over markup and styles. 186 | 187 | Offical Website 188 | 189 | https://react-table-v7.tanstack.com/ 190 | 191 | ## recharts 192 | 193 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/recharts.png?raw=true) 194 | 195 | A composable charting library built on React components. 196 | 197 | Offical Website 198 | 199 | https://recharts.org/en-US/ 200 | 201 | ## video-react 202 | 203 | ![Web Screenshot](https://github.com/arkarWebDev/20-React-Libraries-Every-React-Developer-Should-Have-/blob/master/Demo/video-react.png?raw=true) 204 | 205 | The web video player built from the ground up for an HTML5 world using React library. 206 | 207 | Offical Website 208 | 209 | https://video-react.js.org/ 210 | --------------------------------------------------------------------------------