DEV Community

Cover image for 5 Underrated React Libraries ⚛️ Part-1
Chetan Atrawalkar👉CA.
Chetan Atrawalkar👉CA.

Posted on • Updated on

5 Underrated React Libraries ⚛️ Part-1

Every React developer use react libraries in daily basis to build react applications and it's a better and faster ways to create customized components.
So today, I want to share 5 react libraries that will help you to make react projects.

1. React-Perfect-Scrollbar
This is a wrapper to allow use perfect-scrollbar in React. It is used inside our project for creating nice scrollbars.
Scrollbars
Homepage
GitHub
Usage:-
Install the package npm install react-perfect-scrollbar -S
Import the css file if you have loader for css files:
import 'react-perfect-scrollbar/dist/css/styles.css';
Import the module in the place you want to use:
import PerfectScrollbar from 'react-perfect-scrollbar'

2. React DnD
React DnD is drag and drop library it mostly used for make drag and drop functionality on particular elements.
DnD
Homepage
GitHub
Usage:-
Install the packages npm install react-dnd react-dnd-html5-backend
Import the module in the place you want to use:
import { useDrag } from 'react-dnd'

3. React-Device-Detect
Detect device, and render view according to the detected device type.
detect
Homepage
GitHub
Usage:-
Install the packages using npm or yarn:
npm install react-device-detect --save

or

yarn add react-device-detect
Import the module in the place you want to use:
import {
BrowserView,
MobileView,
isBrowser,
isMobile
} from "react-device-detect";

4. Pure React Carousel
A highly impartial suite of React components that can be assembled by the consumer to create a responsive and aria compliant carousel with almost no limits on DOM structure or CSS styles.
carousel
Homepage
GitHub
Usage:-
Add the module to your project.
npm i -S pure-react-carousel
Import only the required components into your project.
import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';

5. React Grid System
A powerful Bootstrap-like responsive grid system for React.
react-grid-system provides a responsive grid for React inspired by Bootstrap. Moreover, it has various additional powerful features, such as setting breakpoints and gutter widths through React's context.
Three components are provided for creating responsive grids: Container, Row, and Col.
Grid
Homepage
GitHub
Usage:-
Installation:-
npm install react-grid-system --save
An example on how to use these:-
example

I hope you like this react libraries please drop your comments about your thoughts and suggest more libraries you used daily basis in react projects.
For more content follow me on
Instagram @chetan .fullstack

Thank you!
😎 Keep Claim And Just Code It!

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

FYI: React-Perfect-Scrollbar seems to be almost abandoned. It wasn't updated since last year, and is based on an archived library. Not only that, the last version of perfect-scrollbar seems to be kinda buggy (or at least, it feels buggy). Might be better to stick to the native scrollbars.

Collapse
chetan_atrawalkar profile image
Chetan Atrawalkar👉CA. Author

But I'm currently use this scrollbars but im not face issue btw thank for info.