React packages that Increases my  productivity in 2K19 
Tags: react, reactnative, npm, javascript
Published: 2019-12-28 13:18:40

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 

#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](https://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](https://jaredpalmer.com/formik/docs/overview)

#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](https://www.npmjs.com/package/firebase)

#4.ClassNames 
  This is a simple package that removes your string literals , if your using multiple classnames combined to make your style good
![Sample Code](https://thepracticaldev.s3.amazonaws.com/i/hnxekzp2y6c61wscwmm5.png)

Check this out on [classnames](https://www.npmjs.com/package/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 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nwkswn639mdx8xcgcs9g.png)
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](https://www.npmjs.com/package/react-onclickoutside)

#6. Splitter
React-splitter is a package which is used to have draggable splitted div's [preview](https://zesik.com/react-splitter-layout/#/) this will be useful when you have a main page splitted as like whatsapp web 

Check this out on [React-Splitter](https://www.npmjs.com/package/react-splitter-layout)

#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](https://www.npmjs.com/package/react-highlight-words)

#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](https://www.npmjs.com/package/react-contenteditable)

#9. Linkify
Linkify is used to highlight the link in the particular sentence like 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0grhi1usfovfsstwofsu.png)

Check this out on [Linkify](https://www.npmjs.com/package/react-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](https://www.npmjs.com/package/react-inverted-scrollview) 

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