Skip to content

Instantly share code, notes, and snippets.

View akbarjondev's full-sized avatar

Akbarjon akbarjondev

101 followers · 121 following
View GitHub Profile
@akbarjondev
akbarjondev / main.js
Created February 26, 2021 06:33
How to shuffle Array in JavaScript
const shuffleArray = (arr) => {
const copyArr = [...arr]
return copyArr.sort(() => Math.random() - 0.5)
}
@akbarjondev
akbarjondev / getRandomNumFunc.js
Created June 19, 2021 12:56
Javascript generate fixed length random number function
const getFixedLengthRandomnumber = fixed_digit => (String(Math.round(Math.random() * (10**fixed_digit))).padEnd(fixed_digit, '0') - 0)
getFixedLengthRandomnumber(6)
@akbarjondev
akbarjondev / clickingOutside.js
Last active November 21, 2023 06:30
Listen clicks outside of the component In React.js class component
import React, { Component } from "react";
/**
* Component o'zidan tashqari bosilsa log chiqaradi
*/
export default class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.wrapperRef = React.createRef();
@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')
);
@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 / 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 / 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 / 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 / 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 / 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 []