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 / el.js
Last active February 19, 2023 02:58
One of the laziest EL implementations, but with cache
export const el = (nodeName, props = {}, children = []) => {
const $el = (el.cache[nodeName] || (
el.cache[nodeName] = document.createElement(nodeName)
)).cloneNode(true);
Object.assign($el, props).append(...children);
return $el;
};
el.cache = {};
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;
}
const setText = (input: HTMLInputElement, value: string): void => {
const prototype = Object.getPrototypeOf(input);
const valueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
valueSetter.call(input, value);
const init = { bubbles: true, cancelable: true };
input.dispatchEvent(new Event('change', init));
};
class ExpandedPromise<T> extends Promise<T> {
resolve: (value: T | PromiseLike<T>) => void;
reject: (reason?: any) => void;
status: 'pending' | 'fulfilled' | 'rejected' = 'pending';
constructor() {
const callbacks: {
resolve?: ExpandedPromise<T>['resolve'],
reject?: ExpandedPromise<T>['reject'],
import { createElement, CSSProperties, FC } from 'react';
export type CSSBoxProps = CSSProperties & { className?: string };
export const CSSBox: FC<CSSBoxProps> = ({ children, className, ...style }) => {
return createElement('div', { className, style }, children);
};
import { useMemo, useRef } from 'react';
export type UseValuesChangeWatcherResult<T extends Record<string, unknown>> = {
[K in keyof T]?: {
oldValue: unknown;
newValue: unknown;
};
};
const compareFn = <T extends [string, unknown]>(a: T, b: T) => a[0].localeCompare(b[0]);
import { useMemo, useRef } from 'react';
import { useScope } from './useScope';
export type UseThrottlerCallback = (...args: any[]) => void;
export const useThrottler = <T extends UseThrottlerCallback>(callback: T, delay: number): T & { clear: () => void } => {
const scope = useScope({ callback, delay });
const timeout = useRef<number>(0);
return useMemo(() => {
import { CancelTokenSource } from 'axios';
import { useCallback, useRef } from 'react';
import { newCancelTokenSource } from '../network/api/Network';
import { delay } from '../utils/FlowUtils';
import { useOnComponentUnmount } from './useOnComponentUnmount';
import { useScope } from './useScope';
// when your callback returns usePoolingCallback.RETRY, it retries after delay
export const usePoolingCallback = <R, D>(
callback: (cancelTokenSource: CancelTokenSource, data: D) => Promise<R | typeof usePoolingCallback.RETRY>,
import { MutableRefObject, RefCallback, RefObject } from 'react';
export const setRef = <T>(...refs: (RefCallback<T> | RefObject<T> | MutableRefObject<T> | undefined | null)[]) => {
return (instance: T | null) => {
for (const ref of refs) {
if (!ref) continue;
if (typeof ref === 'function') {
ref(instance);
}