React front-end design and development feedback for some important "npm" packages that will play a very helpful role in your day-to-day work. These packages are widely used and will play a great role in making your job easier.
A. carousel Slider:
Of course we use sliders in a website. In order to catch 90% of the websites we have to use sliders. Here are three sliders.
- https://www.npmjs.com/package/react-slick (I personally use it)
- https://www.npmjs.com/package/rc-slider
- https://www.npmjs.com/package/swiper
B. Marquee:
Many times we need a slider show that will continue automatically. Most of the time we use this Marquee design when we use the logo section. If you want you can use React Fast Marquee this npm package. Built by a very simple and very attractive design.
C. JavaScript image gallery and lightbox:
We may need to show gallery images a lot of the time. We've even seen many websites where gallery images start with pop-ups. You can use this package to show exactly the same gallery images through pop-ups.
D. Lazyload:
Listening to the name, you can understand what it does. This is Lazyload. When the content of a website becomes redundant, the website does not have much time to load and this Lazyload npm package will give you some features that are surprising. This means that your skin will load as much as you want - the whole page will never load. You will scroll the website and it will load as well as scroll. Due to which customers will be able to see your content even before your web page is completed.
E. Modal-video:
To create a website we may need to show youtube video or self made video and we have seen in many websites that clicking a button will show youtube video through pop-up and it will continue if you want. You can use the package to show YouTube video pop-ups in the same way.
F. Tooltip:
I hover the mouse over an item and suddenly I see something showing, yes it is called Tooltip. If you want, you can use this package to use beautiful Tooltip. There are several types of designs that are great.
G. Recharts:
Usually when we create dashboard or admin panel we have to look at the data through graph chart and this npm package has a unique role to show the data through graphat I have personally used it is quite good and friendly behavior. In the middle of it.
H. Animate:
And without animation, a website can never be 100 percent beautiful. Attraction to a website is created by the type of animation. Below I have given some animation usage npm packages which are very popular and top notch.
- https://animate.style/
- http://michalsnik.github.io/aos/
- https://mojs.github.io/
- https://www.npmjs.com/package/react-reveal
- https://dbramwell.github.io/react-animate-on-scroll/
I. Alert:
By hearing the name you can understand what it might be like. We may use it when we need the signal on the website. For example, a person went to your website in contact form and sent a message to you, now he sent you a token to know if the work was successful and these npm packages are very useful for sending this token.
- https://www.npmjs.com/package/sweetalert2
- https://sweetalert.js.org/guides/
- https://www.npmjs.com/package/cogo-toast
- https://www.npmjs.com/package/ngx-toastr
- https://www.npmjs.com/package/react-toastify
- https://www.npmjs.com/package/notistack
J. Google-maps:
We often have to put maps on the website and we have seen many websites that have maps so that the customer can know the location accurately. You can easily setup Google Maps using this npm package.
K. Menu:
This allows you to create menus. Those who are struggling to create custom menus can use it. But I think if you can't create custom menus then you can use any framework like Bootstrap, material-ui etc. and if you like then you can also use this package.
L. Sticky Nav:
Many websites have Navbar position Fixed but with a little scrolling you can see an effective design Navbar from top to bottom and you can use this package to do this.
M. scroll-to-top:
Suppose you scroll down to the bottom footer of a website but for some reason you have to climb to the top, then what do you do? Usually what we do is turn the scroll and go up again but here is a package that you can use. If you click through an icon, you can go to the Home stage, that is, if you click on an icon with Footer, you can jump to the top.
N. Perfect-scrollbar:
One of the most popular packages is the Perfect-scrollbar, which is most commonly used in admin panels or dashboards. It places the data on the basis of a specific volume and creates a scrolling effect within that volume. If we put a lot of data on a normal website then the perpendicular of that website will be a lot so using this package thousands of data can be loaded in a specific section and they can be displayed in that section by scrolling.
O. React-ui-scrollspy:
Many times we show all the items through one page, such as, Home, About, Blog, Contact, Portfolio etc. And just in case you need to scroll through the menu item and the section option activated through this package you can do all this work very easily.
P. React Icons:
No matter, just install and use. The benefits of this npm package cannot be overstated. We have to set up icons on the website normally and to set up this icon we have to go to different websites and gather crowds. You can get all the icons from here using this package if you want. Here you will find the icons--- Bootstrap Icons , BoxIcons Devicons, Feather Flat Color Icons, Font Awesome, Game Icons, Github Octicons icons, Grommet-Icons, Heroicons, IcoMoon Free, Ionicons 4, Ionicons 5, Material Design icons, Remix Icon, Simple Icons, Tabler Icons , Typicons, VS Code Icons, Weather Icons, css.gg
- https://react-icons.github.io/react-icons/ (I can't go on without it).
Q. Spinners:
We have to place spinners when the website loads. You can use a great spinner using these npm packages.
- https://www.npmjs.com/package/react-spinners
- https://www.npmjs.com/package/spinners-react
- https://www.npmjs.com/package/react-loader-spinner
R. React-code-input:
Many times we may need OTP (one-time password) from our mobile number. If you need to create a website in such a situation then you can use this npm package. It takes code input in a very nice way.
S. React-currency-format:
E-commerce website may need to sort the amount of money in a format. And you can use this npm package to sort the amount of money.
T. React-countup:
This is very effective in creating designs that can increase a certain number of times over time. We see on most websites that such a company did a job and how many members they have in their team and also starts counting from zero is a specific. If you want, you can create it using this package.
Wrapping Up
I hope you enjoyed the article, if yes then don't forget to press β€οΈ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.ππ
G i t h u b
P o r t f o l i o
L i n k e d i n
Support
Buy me a Coffee
#muhammadasif #webdeveloper #bangladesh
Top comments (2)
thanks π
My Pleasure