codemile

import {ButtonHTMLAttributes, forwardRef} from 'react';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    primary?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({className, primary, children, ...props}, ref) => {
        return (
            <button

codemile

import {DependencyList, useCallback, useEffect, useRef} from 'react';

export const useClickOutside = <T extends (...args: any[]) => any>(
    cb: T,
    dep: DependencyList
) => {
    const ref = useRef<HTMLElement>(null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const callback = useCallback(cb, dep);

codemile

export const useArrayJoin = (
    arr: Array<JSX.Element>,
    join: (key: number) => JSX.Element
) => {
    return useMemo(() => {
        return arr.reduce(
            (acc: null | Array<JSX.Element>, next: JSX.Element, key) =>
                acc === null ? [next] : [...acc, join(key), next],
            null
        );

codemile

export const useCSSVariable = (name: string) => {
    const [value, setState] = useState(
        window.getComputedStyle(document.documentElement).getPropertyValue(name)
    );

    const setValue = useCallback(
        (newValue: string) => {
            setState(newValue);
            document.documentElement.style.setProperty(name, newValue);
        },

codemile

const useTickerTape = <TType extends any>(
  values: Iterable<TType>,
  speed: number
) => {
  const [tape, setTape] = useState([...values]);

  useEffect(() => {
    const id = setTimeout(() => {
      const first = tape.shift();
      setTape([...tape, first]);

codemile

import {
    MouseEventHandler,
    RefObject,
    useCallback,
    useEffect,
    useRef,
    useState
} from 'react';

export type DraggableHandler = (coords: [number, number]) => void;

codemile

import {useCallback, useEffect, useRef, useState} from 'react';

export const useStateDebounce = <TType extends any>(ms: number, initialState?: TType) => {
    const [state, setState] = useState(initialState);
    const ref = useRef(0);
    const setValue = useCallback(value => {
        window.clearTimeout(ref.current);
        ref.current = window.setTimeout(() => setState(value), ms);
    }, [ms]);
    useEffect(() => () => window.clearTimeout(ref.current), []);

codemile

import {useCallback, useMemo, useState} from 'react';

export const useStateJson = <TType extends any>(initialState?: TType) => {
    const [json, setState] = useState<string>(
        JSON.stringify(initialState ?? '')
    );
    const value = useMemo(() => JSON.parse(json), [json]);
    const setValue = useCallback(
        (next: TType) => setState(JSON.stringify(next ?? '')),
        []

codemile

import {useCallback, useState} from 'react';

export const useStateBuffer = <TType extends any>(
    size: number,
    initialState: TType
) => {
    const [values, setState] = useState<Array<TType>>([initialState]);
    const setValue = useCallback(
        (next: TType) => setState([...values, next].slice(0, size)),
        [values]

codemile

import {useCallback, useState} from 'react';

export const useStateCount = <TType extends any>(initialState?: TType) => {
    const [[count, value], setState] = useState([0, initialState]);
    const setValue = useCallback(
        (next: TType) => setState([count + 1, next]),
        [count]
    );
    return [count, value, setValue];
};