Pinned Loading

1. Function returns an array of objects... Function returns an array of objects which are used to fill white gaps which are created by Muuri (grid) package

   1

   import Grid from 'muuri'

   2

   3

   interface GapFillerProps {

   4

       height: number

   5

       columnId: number

2. Hook for converting small images or ... 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

   1

   import { useEffect } from 'react'

   2

   3

   export function useImageToBase64(

   4

       src: string,

   5

       callback: (res: string) => void,

3. Get true (boolean value) when screen... Get true (boolean value) when screen reaches given screen size

   1

   import { useCallback, useState, useEffect } from 'react'

   2

   3

   export function useScreenSize(screenSize: number): boolean[] {

   4

       const [isActive, setIsActive] = useState<boolean>(false)

   5

4. Adds Event listeners to HTML element... Adds Event listeners to HTML elements and safely removes them

   1

   export function bind(target, { type, listerner, options }) {

   2

     target.addEventListener(type, listerner, options);

   3

   4

     return function unbind() {

   5

       target.removeEventListener(type, listerner, options);

5. Javascript generate fixed length ran... Javascript generate fixed length random number function

   1

   const getFixedLengthRandomnumber = fixed_digit => (String(Math.round(Math.random() * (10**fixed_digit))).padEnd(fixed_digit, '0') - 0)

   2

   3

   getFixedLengthRandomnumber(6)

6. A complete guide to check data types... A complete guide to check data types in JavaScript

   1

   function getType(obj) {

   2

     const lowerCaseTheFirstLetter = (str) => str[0].toLowerCase() + str.slice(1);

   3

     const type = typeof obj;

   4

     if (type !== 'object') {

   5

       return type;