azaek

import { RefObject } from "react";
/**
 * This function helps to focus on an input element with soft keyboard on safari(ios).
 * @notice This is a workaround for the issue where the soft keyboard does not show up on safari(ios) when focusing on an input element. Safari(ios) allows keyboard for subsequent focus on an input element if the focus is triggered by a user event like click or touchstart.
 * @param target - RefObject of the input element to focus
 * @param delay (optional) - delay in milliseconds before focusing on the input element can be 0 for instant focus
 */
export const focusInput = (target: RefObject<HTMLInputElement>, delay: number = 500) => {
    // create invisible dummy input to receive the focus first
    const fakeInput = document.createElement('input')

azaek

import { useEffect, useRef } from "react";

interface Callbacks {
    onVisible?: () => void;
    onHidden?: () => void;
}

const useMutationObserver = (
    elementId: string,
    callbacks: Callbacks = {

azaek

<DropdownMenu.Trigger asChild
    onPointerUp={(event) => {
        if (event.pointerType === "touch" || event.pointerType === "pen") {
            setOpenMenu(true);
        }
    }}
    onPointerDown={(event) => {
        if (event.pointerType === "touch" || event.pointerType === "pen") {
            event.preventDefault();
        }

azaek

{
	"Create a functional component tsx": {
		"prefix": "fnc",
		"body": [
			"import { FC } from 'react';",
			"",
			"",
			"interface ${1:${TM_FILENAME_BASE}}Props {",
			"$2",
			"}",

azaek

import clsx from "clsx";
import {
  add,
  eachDayOfInterval,
  endOfMonth,
  format,
  getDay,
  isEqual,
  isSameMonth,
  isToday,

azaek

<svg className='w-full h-full' viewBox="0 0 100% 100%" xmlns='http://www.w3.org/2000/svg'>
	<filter id='noiseFilter'>
    <feTurbulence
      baseFrequency='0.65 0.4'
      numOctaves='3'
      result='NOISE' />
  </filter>
  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

azaek

    const [selected, setSelected] = useState(0);

    const { w, h, indicatorRef, refs } = useTabIndicator({ selected, center: false });

    return (
        <div className="flex items-center gap-8 absolute inset-0 m-auto w-max t-all">
            <div className="relative flex items-center gap-4">
                {
                    ["Home", "Explore", "Profile"].map((item, i) => (
                        <>

azaek

import { useState, useEffect } from "react";

const useImageColor = (img: HTMLImageElement) => {
    const [color, setColor] = useState<any>(null);

    useEffect(() => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        function rgbToHex(r: any, g: any, b: any) {
            r = r.toString(16);

azaek

import { Ref, RefObject, useEffect, useRef } from "react";

const useOutsideClick = (ref: RefObject<HTMLDivElement> , handler: (event : any | null) => void) => {
    useEffect(
        () => {
            const listener = (event: any) => {
                // Do nothing if clicking ref's element or descendent elements
                if (!ref || ref.current?.contains(event.target)) {
                    return;
                }

azaek

import { useEffect, useState } from "react";
const useScroll = () => {
    const [scrollPosition, setScrollPosition] = useState(0);

    useEffect(() => {
        const updatePosition = () => {
            setScrollPosition(window.pageYOffset);
        }
        window.addEventListener("scroll", updatePosition);
        updatePosition();