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) => Promise<void>): void

useUnmount

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

useEffectAsync

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

useAbortableCallback

function useAbortableCallback<Args extends unknown[], Result>(
  callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
, deps: 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> | MutableRefObject<HTMLElement>>
, deps?: React.DependencyList
): void

useIntersectionObserver

function useIntersectionObserver(
  callback: IntersectionObserverCallback
, options: IntersectionObserverInit | undefined
, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
, deps?: React.DependencyList
): void
function useIntersectionObserver(
  callback: IntersectionObserverCallback
, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
, 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, 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?: DependencyList
): void