Posts

Find the current device orientation like landscape or portrait or landscape and portrait screen detections

Mastering Screen Orientation Detection in ReactJS: A Seamless User Experience In today's digital age, where smartphones, tablets, and laptops are ubiquitous, creating responsive web applications that adapt to various screen orientations is crucial. Whether it's portrait mode for reading articles or landscape mode for viewing videos, providing a seamless user experience across different screen orientations is essential. In this blog, we'll explore how to detect screen orientation changes in a ReactJS application. import React, { useState, useEffect } from 'react'; const PORTRAIT_MODE = 'portrait'; const LANDSCAPE_MODE = 'landscape'; const ScreenOrientationDetector = () => { const [screenMode, setScreenMode] = useState(null); useEffect(() => { const screenOrientation = () => { if (window.matchMedia("(orientation: portrait)").matches) { screenMode !== PORTRAIT_MODE && setScreenMode(PORTRAIT_MO...

date with month name format validation

 Get date with month name export   const   dateWithMonthName  = ( da )  =>  {    let   date  =  da    if  ( date  !==  null  &&  date  !==  ""  &&  date  !==  undefined ) {      date  =  new   Date ( da )      const   dateTimeFormat  =  new   Intl . DateTimeFormat ( 'en' , {  year :   'numeric' ,  month :   'long' ,  day :   '2-digit'  })      const  [{  value :  month  }, , {  value :  day  }, , {  value :  year  }] =  dateTimeFormat . formatToParts ( date )      return   ` ${ day }   ${ month }   ${ year } `   }  else  {      return   ""  ...

get Today Date Function , #get current date using javaScripts

 Today date Functions   export   function   getTodayDate () {    var   today  =  new   Date ();    var   dd  =  today . getDate ();    var   mm  =  today . getMonth () +  1 ;    var   yyyy  =  today . getFullYear ();    if  ( dd  <  10 ) {      dd  =  '0'  +  dd ;   }    if  ( mm  <  10 ) {      mm  =  '0'  +  mm ;   }    const   todayDAte  =  yyyy  +  '-'  +  mm  +  '-'  +  dd ;    return   todayDAte }   https://freecodesmasters.blogspot.com/2020/09/today-date-function.html

email validation regex #Email

 EMAIL VALIDATI ON REGEX   export   const   emailValidation  =  email   =>  {      const   regex  =  / ^ (([^ <>()[ \]\\ .,;:\s@" ] + ( \. [^ <>()[ \]\\ .,;:\s@" ] + ) * ) | ( ". + " )) @ (( \[ [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\] ) | (([ a-zA-Z\-0-9 ] +\. ) + [ a-zA-Z ] {2,} )) $ / ;      return   regex . test ( email . toLowerCase ()); }   Click here for share

Replace under scrore with space validation

 Replace under score with space validation   export   const   replaceUnderscoreWithSpace  =  name   =>  {      return   lowerCase ( name . split ( '_' ). join ( ' ' )); }   Click here for share

Replace space with UnderScrore validation

Replace space with Underscore validation     export   const   replaceSpaceWithUnderscore  =  name   =>  {      return   lowerCase ( name . split ( ' ' ). join ( '_' )); }     Click here for share

Alphabetic validation for React JS

 Alphabetic validation for React JS export   const   alphabeticStringValidation  =  val   =>  {      const   regex  =  / ^ [ A-Za-z\-_ ] + $ / ;   //substitute: /^[A-Za-z]+$/without letters      return   regex . test ( val ); }     Click here for Share