extra-react-hooks

Install

npm install --save extra-react-hooks
# or
yarn add extra-react-hooks

API

interface IOptionState {
  selected: boolean
}

useToggle

function useToggle(initialState: boolean = false): [on: boolean, toggle: () => void]

useSingleSelection

function useSingleSelection<T>(
  options: NonEmptyArray<T>
, defaultSelectedIndex: number
): {
  selectedIndex: number
  optionStates: IOptionState[]
  select: (index: number) => void
}

useMultipleSelection

function useMultipleSelection<T>(
  options: NonEmptyArray<T>
, defaultSelectedIndexes: number[] = []
): {
  selectedIndexes: number[]
  optionStates: IOptionState[]
  toggle: (index: number) => void
  select: (index: number) => void
  unselect: (index: number) => void
}

useMount

function useMount(effect: EffectCallback): void

useMountAsync

function useMountAsync(effect: (signal: AbortSignal) => PromiseLike<void>): void

useUnmount

function useUnmount(effect: () => void): void 

useEffectAsync

function useEffectAsync(
  effect: (signal: AbortSignal) => PromiseLike<void>
, deps?: React.DependencyList
): void

useAbortableCallback

function useAbortableCallback<Args extends unknown[], Result>(
  callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
, deps?: React.DependencyList
): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>

useUpdateEffect

function useUpdateEffect(
  effect: EffectCallback
, deps?: React.DependencyList
): void

useStateCycle

function useStateCycle<T>(
  orderedStates: NonEmptyArray<T>
, initialStateIndex: number = 0
): [state: T, next: () => void]

useIsMounted

function useIsMounted(): () => boolean

useIsFirstRender

function useIsFirstRender(): () => boolean

useIncrement

function useIncrement(
  initialValue: number
): [value: number, increment: (step?: number) => void, reset: () => void]

useResizeObserver

function useResizeObserver(
  callback: ResizeObserverCallback
, refs: Array<RefObject<HTMLElement | null | undefined>>
, deps?: React.DependencyList
): void

useIntersectionObserver

function useIntersectionObserver(
  callback: IntersectionObserverCallback
, options: IntersectionObserverInit | undefined
, refs: Array<RefObject<HTMLElement | null | undefined>>
, deps?: React.DependencyList
): void
function useIntersectionObserver(
  callback: IntersectionObserverCallback
, refs: Array<RefObject<HTMLElement | null | undefined>>
, deps?: React.DependencyList
): void

useStep

function useStep<T>(
  steps: NonEmptyArray<T>
, initialStepIndex: number = 0
): [currentStep: T, next: () => void, previous: () => void]

useForceUpdate

function useForceUpdate(): () => void

useFiniteStateMachine

function useFiniteStateMachine<
  State extends string | number | symbol
, Event extends string | number | symbol
>(
  schema: IFiniteStateMachineSchema<State, Event>
, initialState: State
): ObservableFiniteStateMachine<State, Event>

The ObservableFiniteStateMachine comes from extra-fsm.

useRenderCounter

function useRenderCounter(): number

useIIFE

function useIIFE(
  iife: (() => () => void)
      | (() => void)
, deps?: React.DependencyList
): void

If you don't need an effect, then you probably need an IIFE.

useIIFEAsync

function useIIFEAsync(
  iife: (signal: AbortSignal) => PromiseLike<void>
, deps?: React.DependencyList
): void

useMemoWithCleanup

function useMemoWithCleanup<T>(
  factory: () => T
, cleanup: (value: T) => void
, deps?: React.DependencyList
): T

useGetSet

function useGetSet<T>(
  initialValue: T
): [get: () => T, set: (value: T) => void]

useIsomorphicLayoutEffect

function useIsomorphicLayoutEffect(
  effect: EffectCallback
, deps?: React.DependencyList
): void

useDebounce

function useDebounce<Args extends unknown[]>(
  fn: (...args: Args) => void
, timeout: number
, deps?: React.DependencyList
): (...args: Args) => void

useNumberInput

function useNumberInput(params: {
  value: number
  lazy?: boolean

  onChange(value: number, isEnd: boolean): void
}): {
  getInputProps(): Required<Pick<
    React.ComponentPropsWithoutRef<'input'>
  , 'value'
  | 'onChange'
  | 'onBlur'
  >>
}

useMediaQuery

function useMediaQuery(query: string): boolean