extra-react-hooks

Install

``sh
npm install --save extra-react-hooks

or

yarn add extra-react-hooks
`

API

`ts
interface IOptionState {
selected: boolean
}
`

$3

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

$3

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

$3

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

$3

`ts
function useMount(effect: EffectCallback): void
`

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

`ts
function useIsMounted(): () => boolean
`

$3

`ts
function useIsFirstRender(): () => boolean
`

$3

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

$3

`ts
function useResizeObserver(
callback: ResizeObserverCallback
, refs: Array>
, deps?: React.DependencyList
): void
`

$3

`ts
function useIntersectionObserver(
callback: IntersectionObserverCallback
, options: IntersectionObserverInit | undefined
, refs: Array>
, deps?: React.DependencyList
): void
function useIntersectionObserver(
callback: IntersectionObserverCallback
, refs: Array>
, deps?: React.DependencyList
): void
`

$3

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

$3

`ts
function useForceUpdate(): () => void
`

$3

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

The ObservableFiniteStateMachine comes from [extra-fsm].

[extra-fsm]: https://www.npmjs.com/package/extra-fsm

$3


`ts
function useRenderCounter(): number
`

$3

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

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

[If you don't need an effect]: https://react.dev/learn/you-might-not-need-an-effect

$3

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

$3

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

$3

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

$3

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

$3

`ts
function useDebounce(
fn: (...args: Args) => void
, timeout: number
, deps?: React.DependencyList
): (...args: Args) => void
`

$3

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

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

$3


`ts
function useMediaQuery(query: string): boolean
``