React packages that improved my productivity in 2019

Hey dev’s it time to wind up the year 2019 , just want to share some packages which helped me a lot in my work during the year 2019 . These packages can really help you a lot if you didn’t use them before.React packages that improved my productivity in 2019.

Recent Articles,

Configuring babel for Node.js/Express Server

How to Run MongoDB as a Docker Container in Development

1.Antd

It’s a Design system which consist of almost all the components we need along with its own style . Even in 2017 I used ant design but it way upgraded in the year 2019 , especially for hooks. It’s totally free and it will help you to complete the work along with the style than expected.
It has it’s way support for react-native too

Check this out on ant design

2.Formik

Formik is on of the best find for me this year .If your application has more than one form and each form fields requires validation, you must use formik it will reduce your work by 60% . It’s generally a form management package like redux-forms which will maintain all your form states and useful props like isTouched , by using isTouched you can display the error message only if the user clicked that field

Check this out on formik

3.Firebase

Firebase is one the best and simple authentication that an react app can have. I doesn’t need any back end to connect , it will maintain its own session and it has its own password hashing and validation. If you need an authentication module in quicker time this can really help

Check this out on google firebase

4.ClassNames

This is a simple package that removes your string literals , if your using multiple classnames combined to make your style good

Check this out on classnames

5.Handle body click

I faced this issue many times (ie) making a custom div visible and need to disable the div if the user clicks in the body as in the pic

now I need to close the user profile div if the user clicks anywhere outside that div . This package made my code simple by providing the HOC to handle the outside click

Check this out on onClickOutside

6. Splitter

React-splitter is a package which is used to have draggable splitted div’s preview this will be useful when you have a main page splitted as like whatsapp web

Check this out on React-Splitter

7. Highlighter

If your application has the search feature and you’re in need to highlight the searched word in the sentence then this is the package you’re searching for . It has props to change the highlight colour etc.

Check this out on React-Highlighter

8 . ContentEditable

Content editable is the thing where a div acts as an input field,it can also render the smiley and image we can achieve this thing by simple using contenteditable=“true” in the div or this packages does the same thing along with the style

Check this out on ContentEditable

9. Linkify

Linkify is used to highlight the link in the particular sentence like

Check this out on Linkify

10 . Inverted Scroll

If you’re building a chat application or while using infinite loading or if you need to control the scroll this component will be useful. This is a package which only has an average of 50 downloads but believe me this could satisfy all your needs related to scroll

Check this out on Inverted Scroll

Try this packages in 2020 if you didn’t use them in 2019 !
Happy 2k19 ending ! & A Happy 2020
Keep Coding !