KacperKozak

import { useMemo } from 'react';

/**
 * A hook that returns a memoized version of the given object or array.
 * **Important!** Use only if the object structure or array length is not changing!
 * 
 * @example
 * ```ts
 * const api = useStructMemo({ query, setQuery, count });
 * ```

KacperKozak

// ludzie-iza.json
{
    "name": "Izabela",
    "age": 25,
    "city": "Warsaw",
    "description": {
        "pl": "Jestem programistką",
        "en": "I'm a programmer",
        "de": "Ich bin Programmiererin"
    }

KacperKozak

import { useReducer } from 'react';

type Reducer<T> = (state: T, update: Partial<T>) => T;

export const useObject = <T>(initial: T) => {
    return useReducer<Reducer<T>>((state, update) => ({ ...state, ...update }), initial);
};

KacperKozak

import React, { ReactNode } from 'react'

export interface TabProps {
    name: string
    isActive?: boolean
    children: ReactNode
}

export const Tab = ({ children }: TabProps) => <>{children}</>

KacperKozak

import { createContext, PropsWithChildren, useContext, useState } from 'react'
import { createPortal } from 'react-dom'

const PortalContext = createContext<HTMLDivElement | null>(null)

export const PortalContextProvider = ({ children }: PropsWithChildren) => {
    const [element, setElement] = useState<HTMLDivElement | null>(null)

    return (
        <>

KacperKozak

import { uniq, xor } from 'lodash'
import { useMemo, useState } from 'react'

export const useSet = <T>(initial: T[] | (() => T[]) = []) => {
  const [state, setState] = useState(initial)

  return useMemo(
    () => ({
      values: state,
      size: state.length,

KacperKozak

import { MutableRefObject, useEffect } from 'react'

export const useOnClickOutside = (refs: MutableRefObject<any>[], handler: () => void) => {
    useEffect(() => {
        const listener = (event: any) => {
            const someElContainsTarget = refs.some((ref) =>
                ref.current?.contains(event.target),
            )
            if (!someElContainsTarget) handler()
        }

KacperKozak

import { DependencyList, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'

/**
 * `useState` with dependency list, similar to `useMemo` but you can change state
 *
 * @example const [error, setError] = useStateEffect(!url, [url]);
 * @example const [table, setTable] = useStateEffect(() => makeTable(data), [data]);
 */
export const useStateEffect = <T>(
    value: T | (() => T),

KacperKozak

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

KacperKozak

interface FormData {
    message: string
    email: string
}

const App = () => {
    const { submitHandler, values, updateFieldValue, touchField, getFieldError } = useForm<FormData>(
        {
            message: required('Message is required'),
            email: pipe(