Skip to content

Instantly share code, notes, and snippets.

View Gaurav8757's full-sized avatar
🏠
Working from home

Gaurav Kumar Gaurav8757

🏠
Working from home
View GitHub Profile
@Gaurav8757
Gaurav8757 / DatePicker.jsx
Created March 8, 2025 10:51
Date yyyy-mm-dd select, show in value dd/MM/yyyy
// Date Format Helper Functions
const formatDate = (dateString, format = "dd/MM/yyyy") => {
if (!dateString) return ""; // Handle empty date
const date = new Date(dateString);
if (isNaN(date.getTime())) return "Invalid Date"; // Check if date is valid
const day = String(date.getDate()).padStart(2, "0");
const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based
const year = date.getFullYear();
@Gaurav8757
Gaurav8757 / popupUI.jsx
Created February 8, 2025 10:52
Popup View OR YOU CAN ADD INSIDE ANY DATA OR FORM
/* eslint-disable react/prop-types */
import { AnimatePresence, motion } from "motion/react";
import { Check, Copy, X } from "lucide-react";
import { toast } from "react-toastify";
import { useState } from "react";
const proposals = {
quote_id: "Q300008826023",
quote_no: "QT/25/6200028116",
proposal_no: "PR/25/6200002447",
proposal_id: "PR300001577841",
@Gaurav8757
Gaurav8757 / env.md
Last active July 6, 2024 08:20
Environment Variable

Node.js Environment

  1. CommonJS
npm install dotenv
const dotenv = require("dotenv").config();
const apiKey = process.env.API_KEY;
  1. ModuleJS (ES6)
npm install dotenv
@Gaurav8757
Gaurav8757 / serialNo.js
Created July 2, 2024 07:28
In MongoDB, added serial No.
import mongoose from "mongoose";
const { Schema } = mongoose;
const claimSchema = new Schema({
sNo: { type: Number, unique: true },
date: { type: Date },
companyName: { type: String},
claimType: { type: String },
policyNo: { type: String },
insuredName: { type: String },
@Gaurav8757
Gaurav8757 / contentEditable.jsx
Created June 24, 2024 12:51
Use ContentEditable
function MasterView() {
const [allDetailsData, setAllDetailsData] = useState([]);
const handleNumericInput = (e) => {
const input = e.target.innerText;
const numericInput = input.replace(/[^\d.]/g, ''); // Remove any non-numeric characters
if (input !== numericInput) {
e.target.innerText = numericInput; // Update the contentEditable element with numeric value
}
import { useState } from 'react';
const App = () => {
const [albums, setAlbums] = useState([
{ userId: 1, title: 'Album', id: 1 },
{ userId: 1, title: 'omnis laborum odio', id: 2 },
{ userId: 1, title: 'omnis laborum odio 2', id: 3 },
{ userId: 2, title: 'aque aut omnis a', id: 4 },
{ userId: 2, title: 'aque aut omnis a laborum odio', id: 5 },
{ userId: 3, title: 'omnis laque aut omnis', id: 6 },
]);
@Gaurav8757
Gaurav8757 / date.js
Last active July 17, 2025 19:38
YYYY-MM-DD to DD-MM-YYYY
import React, { useState } from 'react';
function AddTerminator() {
const [terminatedate, setTerminateDate] = useState("");
const [dateInput, setDateInput] = useState("");
const convertDateFormat = (dateStr) => {
const [year, month, day] = dateStr.split('-');
return `${day}-${month}-${year}`;
};
@Gaurav8757
Gaurav8757 / UpdateSelectedIdData.js
Created May 23, 2024 12:43
Not sent all data as props only user click or select data pass to update
import React, { useState } from 'react';
// List component
const ListWithUpdate = () => {
const [APIData, setAPIData] = useState([]);
// STATE TO MANAGE POPUP AND DATA
const [showUpdatePopup, setShowUpdatePopup] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
// SEND DATA WITH ID AND POPUP TRUE TO OPEN
const handleUpdateClick = (id) => {
@Gaurav8757
Gaurav8757 / UpdateOneData.js
Created May 23, 2024 12:32
Update from lists of an API Data send selected data to Pop-up form
import { useState, useEffect } from "react";
import axios from 'axios';
//COMPONENT TEXTLOADER AND TWUPDATESLAB
import TextLoader from "../../loader/TextLoader.jsx";
import TwUpdateSlab from "../UpdatePaySlabs/TwUpdateSlab.jsx";
import { toast } from "react-toastify";
// BACKEND API CALL
import VITE_DATA from "../../config/config.jsx";
function TwLists() {
@Gaurav8757
Gaurav8757 / Suspense.js
Last active September 3, 2024 11:27
A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that …
startTransition:
1. startTransition is a function in React that is used when you're about to update a particular state and its impact shouldn't heavily affect the UI.
2. Its primary purpose is to ensure that if you're running a long-running process, the user doesn't face significant delays in the UI.
3. It allows React to defer the update, making it non-blocking for the user interface.
Suspense: