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
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 is you didn't use them in 2019 !
Happy 2k19 ending ! & A Happy 2020
Keep Coding !
Top comments (2)
Hi Karthick, could you show some examples of React with Firebase? I hear it's a great time saver like you wrote but don't use in practice.
Hi @Meat Boy sure will share it in my next post coz it's a bit long