Skip to content

Instantly share code, notes, and snippets.

View akbarjondev's full-sized avatar

Akbarjon akbarjondev

View GitHub Profile
@akbarjondev
akbarjondev / lazy.js
Created January 7, 2024 13:45
Custom lazy function in React
export const lazy = (componentFactoryPromise) => {
const componentPromise = componentFactoryPromise()
let Component
componentPromise.then(C => {
Component = C.default
})
return (props) => {
if(!Component) {
throw componentPromise
@akbarjondev
akbarjondev / delay.js
Created November 22, 2023 13:32
Function for delaying executing next line of code
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
@akbarjondev
akbarjondev / reverseInPlace.js
Created November 21, 2023 06:27
Reverse in place algorithm for arrays
function reverseInPlace(arr) {
let length = arr.length,
middle = Math.floor(length / 2),
temp = null
for(let i = 0; i < middle; i++) {
temp = arr[i]
arr[i] = arr[arr.length - 1 - i]
arr[arr.length - 1 - i] = temp
}
@akbarjondev
akbarjondev / calculateGapFillers.ts
Last active October 30, 2023 14:40
Function returns an array of objects which are used to fill white gaps which are created by Muuri (grid) package
import Grid from 'muuri'
interface GapFillerProps {
height: number
columnId: number
gapHeight?: number
}
export const calculateGaps = (grid: Grid): GapFillerProps[] => {
if (!grid) return []
@akbarjondev
akbarjondev / usePreviousRoute.ts
Created February 21, 2023 15:40
Retrieve previous route and/or route history in Next router
import { useRouter } from 'next/router';
import { useRef } from 'react';
export const usePreviousRoute = () => {
const router = useRouter();
const ref = useRef<string | null>(null);
router.events?.on('routeChangeStart', () => {
ref.current = router.asPath;
@akbarjondev
akbarjondev / useScreenSize.ts
Created January 11, 2023 10:09
Get true (boolean value) when screen reaches given screen size
import { useCallback, useState, useEffect } from 'react'
export function useScreenSize(screenSize: number): boolean[] {
const [isActive, setIsActive] = useState<boolean>(false)
const handleScreenResize = useCallback(() => {
const isActive = window.matchMedia(`(min-width: ${screenSize}px)`)
setIsActive(isActive.matches)
}, [setIsActive, screenSize])
@akbarjondev
akbarjondev / eventBinder.js
Last active December 12, 2024 09:36
Adds Event listeners to HTML elements and safely removes them
export function bind(target, { type, listener, options }) {
target.addEventListener(type, listener, options);
return function unbind() {
target.removeEventListener(type, listener, options);
};
}
@akbarjondev
akbarjondev / thousandSeparator.ts
Last active November 2, 2022 03:00
Separate thousands, used for prices
const priceUtility = (pr: string | number): string => {
// remove spaces
const price: string = pr.toString().replaceAll(' ', '');
// get hole part
const holePart: number = parseInt(price);
// get float part of price if exist
const floatPart: string =
parseFloat(price) - holePart === 0
? ''
: (parseFloat(price) - holePart).toFixed(2).substring(1);
@akbarjondev
akbarjondev / useImageToBase64.ts
Last active October 28, 2023 11:21
Hook for converting small images or thumbnails into binary data. Converting images in this way gives good experience while loading images in Next.js apps
import { useEffect } from 'react'
export function useImageToBase64(
src: string,
callback: (res: string) => void,
outputFormat?: string
) {
useEffect(() => {
let img = new Image() // Image constructor equivalent to document.createElement
img.crossOrigin = 'Anonymous'
@akbarjondev
akbarjondev / checkType.js
Created May 27, 2022 10:53
A complete guide to check data types in JavaScript
function getType(obj) {
const lowerCaseTheFirstLetter = (str) => str[0].toLowerCase() + str.slice(1);
const type = typeof obj;
if (type !== 'object') {
return type;
}
return lowerCaseTheFirstLetter(
Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1')
);