CodeNewbie Community 🌱

Zain Ahmed
Zain Ahmed

Posted on

Some Utils/Generic Functions React.js

Utility functions are really good and powerful for every application , they can produce a good impact on application or on the code reviewer. let see some of the examples here to learn about them

  1. Name Concatenation
  2. Date Format
  3. Custom Toastify
  4. Convert Imagetobase64
  5. Image Extension Validation

Name Concatenation

Alt Text

In this example, I simple place 3 conditions in function , the function will take an object as param,

first condition will check if lastname property is not present in data object then return only firstname.

second condition will check if firstname property is not present in data object then return only lastname.

third condition will check if firstname and lastanme properties are present in data object then return firstname + lastname.

Date Format

Alt Text

In this example, i use the moment library to get date format, declare empty object with authentic name and then declare different function for formatting in this object ,every function will take date as param and return the result with desire format.

first one will return complete data and time , date will be in words and time with AM/PM.

second one will return only date without time , date will be in words.

third one will return date only with aligning in month-date-year.

fourth one will return date only with aligning in date-month-year.

fifth one will return date only with aligning in year-month-year.

Custom toastify

Alt Text

In this example i used the library react-toastify for show simple message to user , i created a function import the library and then create a config object for my every message and create a switch case functions with 2 case , 1 is error and 2 is success, you can create as many as you want with given lib flags ,like error , success , info etc.
this function will take 2 arguments first will be flag for error and then message will be second param.

first case will execute when flag "error" comes and it will show the message to user with default configuration.

first case will execute when flag "success" comes and it will show the message to user with default configuration.

Convert Imagetobase64

Alt Text

In this example , I create a function for convert image to base64 , this function will accept one param which is file object, when this function call it will create a FileReader object and then i used the method to convert the file to base64 if file convert successfully it will resolve and return string. if any error occur it will reject and return the error.

Image Extension Validation

Alt Text

In this example function will receive image object and then i split the name of picture the name field will be in image object from which i get the image extension and then i simple create a condition that if image extension will be jpg,JPG,png,PNG then it will be true/valid image otherwise will be be false/invalid image
these all functions now can be use on entire application so you don't need to define again and again these functions in different pages to use , you can import functions and use them.

Top comments (0)