azaek

import { useRef, useState } from "react";

const ProductImage = () => {

    const [x, setX] = useState(0);
    const [y, setY] = useState(0);
    const [l, setL] = useState(0);
    const [t, setT] = useState(0);
    const ref = useRef<HTMLDivElement>(null);

azaek

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

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

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 { 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

    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

<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

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

azaek

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

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

import { useEffect, useRef } from "react";

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

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