This content originally appeared on DEV Community and was authored by Muhammad Asif
At my previous article, I share 20 React.js packages. If you didn't read that check it out Best NPM Package for React.js part -1 and then continue this article.
React front-end Design & Development for some important "npm" packages that will play a very helpful role in your daily work. These packages are widely used and they will play a great role in making your work easier.
A. Html-react-parser:
When we write blogs, we have to post them from our backend or admin panel. However, when we make posts, they are stored in the database as normal text, but if we use this plugin, the entire HTML structure will be stored in the database. This means that we can send full html through this plugin.
Example: parse('<h1>single</h1>'); That is, we get the output here just like that <h1>single</h1>, Another will be completely stored in the database.
B. Axios:
This is a popular plugin for receiving HTTP clients. Usually in client site we have to work with API. It is mandatory to use API for loading data. But in the beginning we use fetch (). But the most interesting thing is that this plugin is so simple that you can load the API very quickly
Example:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
C. React-share:
In various blog posts we can see at the bottom or at the top. Some social networks have a system of sharing. We can take such action if we want through this plugin. The function of this plugin is to connect with social networks, that is, if you want to share your post on social networks, you can do it through this plugin.
D. Export-from-json:
This is commonly used to export json files. Export to plain text, css, html, json, csv, xls, xml files from JSON. If you need to export from JSON file to plain text, css, html, json, csv, xls, xml files then you can use it.
E. EmailJS:
We usually exchange information in the contact list. The communication system starts from the contact list and you can make the communication system very easy with this plugin, which means you can easily get the files in the contact list via email with this plugin.
F. Progressbar:
Most of the time we see Progressbar in website design, Progressbar is some symbolic design which shows how much knowledge he has acquired on a subject or all the information of a company. You can create your own design using the plugins.
- https://www.npmjs.com/package/react-circular-progressbar
- https://www.npmjs.com/package/@ramonak/react-progress-bar
- https://www.npmjs.com/package/react-customizable-progressbar
- https://github.com/kimmobrunfeldt/progressbar.js...
- https://www.npmjs.com/package/react-progressbar-fancy
- https://kimmobrunfeldt.github.io/progressbar.js/
G. Rich editor:
The Rich Text Editor is a tool that allows you to add or edit content, images, links, and other components on the page without having to know any code. It displays the content and any formatting as it would display in the browser. These plugins are related to html-react-parser.
H. React-tabs:
I can't go on without it. I have had to use this plugin on every website I create. In a word, extraordinary. I even created menu / navbar with this plugin. However, other frameworks have similar designs, such as the Bootstrap tab, but I will put this React-tabs plugin at the top.
I. Scroll Effect:
These plugins are quite useful for CSS design. These plugins allow you to make a number of changes as you scroll through your website.
- https://www.npmjs.com/package/react-scroll-parallax
- https://www.npmjs.com/package/react-custom-scroll (This plugin can be used to change the scroll bar design on the right side of the browser)
- https://www.npmjs.com/package/react-infinite-scroller
- https://www.npmjs.com/package/react-custom-scrollbars
J. React Date Picker:
By hearing the name you can understand what a job can be. A simple and reusable Datepicker component for React. Many times we may need to count the dates on the website. You can easily pick up time with this plugin. Very popular plugin that is widely used.
- https://www.npmjs.com/package/react-datepicker
- https://www.npmjs.com/package/react-datetime
- https://www.npmjs.com/package/react-date-range
K. React-select:
This is a very advanced topic. Usually there is a tag called html select. Which is used to select. However w3school on this website (https://www.w3schools.com/tags/tag_option.asp) is very normal but if you want to get some features in advance then this npm React-select package is not an option. A little complicated, however, if you read their documentation well, you can easily use it.
The last 2 days I had a lot of trouble using this package, but I did not give up and after spending about 14 hours I solved the problem. I said that you have to read the documentation well. I read the documentation line by line over time and then he brought the codes to their proper status.
L. React-accessible-accordion:
After hearing the name Accordion, you understand what it does. I clicked on a text or an icon and immediately a section at the bottom gave out some information, then I clicked on that icon and it closed. Ha's name is Accordion. You can use Bootstrap or any other framework that you have, but I like this plugin very much. I have also used it on some websites.
- https://www.npmjs.com/package/react-accessible-accordion
- https://www.npmjs.com/package/react-collapsible
- https://www.npmjs.com/package/rc-collapse
M. React Visibility Sensor:
is a very advanced topic. But it is very easy to understand. The last two months I purchased four react templates from Themeforest for research purposes only. And the most interesting package I've seen is this. Its function is the Sensor component for React that notifies you when it goes in or out of the window viewport.
This means that once your entire web page is loaded, the task will wait for you until you go to a specific section. Suppose you create a section called Counter on your website and there is a count of one to one hundred when data or website is reloaded. But one thing you will notice is that if your counter section is in the footer then you will see in the footer that counter 100 is full. You no longer see the counter being 100. And so the function of this React Visibility Sensor plugin is that the counter will not be counted until you go to that section. As soon as you see that section or that section of your monitor, that counter will start counting. In other words, by turning the scroll of the mouse, you will start counting from one to one hundred as soon as you go to the counter section.
Example: http://met-cifo.amitjs.com/about-us
N. React Hook Form:
A very popular plugin is React Hook Form (Performant, flexible and extensible forms with easy-to-use validation). We have to create a lot of obligations when we work with Form, and so this plugin will help you a lot to do that. This plugin has a very simple structure and a lot of popularity. It can work with both react web and react native.
O. React-helmet:
This plugin is very popular for dynamically setting metadata. I use this plugin on every website.
Example: http://met-cifo.amitjs.com/ (If you hover over the favicon of each page on this website, you will see that the metadata is seen separately on each page.)
P. React-image-magnify:
When we visit an e-commerce website and hover the mouse over the product, the product is magnified and zoomed. You can do this with the React-image-magnify plugin. However, the setup is a little complicated, so read the documentation well.
Q. React-modal:
Clicked on an icon and a pop up box appeared. This means that this plugin can be used to create pop-up models.
R. Countdown:
Countdown is used. On the website we usually see some information called counter which is mostly seen how many people are working in a company or how many people are in a company or how many projects have been completed. Such information is presented through a design. Suppose you have completed a project, now your design will be calculated from 1 to 100. You can do this by following the plugins below.
- https://www.npmjs.com/package/react-countdown
- https://www.npmjs.com/package/use-react-countdown
- https://www.npmjs.com/package/react-countdown-circle-timer
S. Table:
Table which is a very useful tag. When we have a lot of data in our hands, we have to take the help of tables to show that data. If you want, you can create and use the normal table format in w3schools. Again if you want something of advanced level then you can use this plugin I personally use these plugins.
T. React Rating:
We often have to use ratings to create feedback sections. You can create ratings very nicely with the help of these plugins below. Using these plugins, you can customize the designs through your own customization.
- https://www.npmjs.com/package/react-rating
- https://www.npmjs.com/package/react-simple-star-rating
- https://www.npmjs.com/package/react-rating-stars-component
- https://www.npmjs.com/package/react-star-ratings
U. Typewriter Effect:
Various texts show that some texts are dancing and disappearing. Yes these are called Typewriter Effect. You can easily create text effects using these plugins given below.
- https://www.npmjs.com/package/typewriter-effect
- https://www.npmjs.com/package/react-simple-typewriter
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
This content originally appeared on DEV Community and was authored by Muhammad Asif
Muhammad Asif | Sciencx (2022-06-24T15:39:30+00:00) Best NPM Package for React.js Part – 2. Retrieved from https://www.scien.cx/2022/06/24/best-npm-package-for-react-js-part-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.