Skip to content

Instantly share code, notes, and snippets.

View MarekZeman91's full-sized avatar
๐Ÿ˜

Marek Zeman MarekZeman91

๐Ÿ˜
  • Marek Zeman
  • Czech Republic
View GitHub Profile
@MarekZeman91
MarekZeman91 / InputField.tsx
Created May 12, 2025 12:56
Create an input field that will avoid React "onChange" and has debounce functionality.
import { type FC, useEffect, useRef, type InputHTMLAttributes, type ChangeEvent } from 'react';
export interface InputField extends InputHTMLAttributes<HTMLInputElement> {
debounceTimeout: number;
}
export const InputField: FC<InputField> = ({ value: defaultValue, onChange, debounceTimeout = 1, ...props }) => {
const timeoutInfo = useRef({ onChange, timeout: 0 });
Object.assign(timeoutInfo.current, { onChange });
@MarekZeman91
MarekZeman91 / PlaywrightStalker.js
Last active May 21, 2025 20:41
PlaywrightStalker ... for those who like to watch. It is a button/script that always keeps the current test active and visible.
// 1. run Playwright with ui
// 2. paste this code in console
// 3. there is a new PIN button next to Playwright logo
window.PlaywrightStalker?.stop();
window.PlaywrightStalker = ((d = document) => {
const $ = (sel) => d.querySelector(sel);
const $$ = (sel) => Array.from(d.querySelectorAll(sel));
const delay = (ms = 1) => new Promise((r) => setTimeout(r, ms));
const h = (node, props) => Object.assign(d.createElement(node), props);
/**
* Clone value deeply, ignore custom classes, symbols and functions
* @param value
* @return cloneOfValue
*/
export function deepClone<T>(value: T): T {
if (typeof value !== 'object' || !value) {
return value;
}
import { useState } from "react";
export function useUpdate(): [number, () => void] {
const [state, setState] = useState(0);
return [state, () => setState(Date.now())];
}
import { useMemo } from "react";
import { useArrayHash } from "./useArrayHash";
export function useMemoizedArray<T1, T2 = T1>(
array: T1[],
hashKey: keyof T1,
): [T2[], string];
export function useMemoizedArray<T1, T2 = T1>(
export function useArrayHash<T>(array: T[], key: keyof T): string {
return array.map((x) => x[key]).join("");
}
import type { Dispatch } from "react";
import { useState } from "react";
export function useAutoResetState<S>(
initialState: S | (() => S),
): [S, Dispatch<S>] {
const [state, setState] = useState(initialState);
return [
state,
(temporaryState: S) => {
@MarekZeman91
MarekZeman91 / el.ts
Last active February 20, 2025 03:15
One of the laziest EL implementations, but with cache
export function el<K extends keyof HTMLElementTagNameMap>(
nodeName: K,
props?: Record<string, any>,
children?: (string | number | boolean | Node)[],
): HTMLElementTagNameMap[K];
export function el<T extends HTMLElement>(
nodeName: string,
props?: Record<string, any>,
children?: (string | number | boolean | Node)[],
const triggerDownload = (blob: Blob, filename: string) => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.download = filename;
link.href = url;
document.body.appendChild(link);
link.dispatchEvent(new MouseEvent('click', {
bubbles: true,
@MarekZeman91
MarekZeman91 / Forwarded.tsx
Created May 27, 2022 21:25
How to forward custom ref
import { createRef, ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';
interface ForwardedHandlers<T> {
getValue(): T;
}
interface ForwardedProps<T> {
value: T;
children?: never;
}