codemile

import {useEffect, useState} from 'react';

const useGeoLocation = (options?: PositionOptions) => {
    const [geo, setGeo] = useState<GeolocationPosition>();
    const [err, setError] = useState<GeolocationPositionError>();
    useEffect(() => {
        const id = navigator.geolocation.watchPosition(
            (pos) => {
                setGeo(pos);
                err && setError(undefined);

codemile

import {useEffect, useMemo} from 'react';

export const useAudio = (
    src: string,
    play: boolean,
    volume: number,
    loop: boolean,
    onDone?: () => void
) => {
    const audio = useMemo(() => {

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 ?? '')),
        []