https://github.com/blackglory/extra-react-hooks
🌲
https://github.com/blackglory/extra-react-hooks
browser esm nodejs npm-package react react-hooks-library typescript
Last synced: 2 months ago
JSON representation
🌲
- Host: GitHub
- URL: https://github.com/blackglory/extra-react-hooks
- Owner: BlackGlory
- License: mit
- Created: 2021-06-04T16:45:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T04:17:44.000Z (about 2 years ago)
- Last Synced: 2024-10-16T10:33:42.702Z (over 1 year ago)
- Topics: browser, esm, nodejs, npm-package, react, react-hooks-library, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/extra-react-hooks
- Size: 1.73 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# extra-react-hooks
## Install
```sh
npm install --save extra-react-hooks
# or
yarn add extra-react-hooks
```
## API
```ts
interface IOptionState {
selected: boolean
}
```
### useToggle
```ts
function useToggle(initialState: boolean = false): [on: boolean, toggle: () => void]
```
### useSingleSelection
```ts
function useSingleSelection(
options: NonEmptyArray
, defaultSelectedIndex: number
): {
selectedIndex: number
optionStates: IOptionState[]
select: (index: number) => void
}
```
### useMultipleSelection
```ts
function useMultipleSelection(
options: NonEmptyArray
, defaultSelectedIndexes: number[] = []
): {
selectedIndexes: number[]
optionStates: IOptionState[]
toggle: (index: number) => void
select: (index: number) => void
unselect: (index: number) => void
}
```
### useMount
```ts
function useMount(effect: EffectCallback): void
```
### useMountAsync
```ts
function useMountAsync(effect: (signal: AbortSignal) => PromiseLike): void
```
### useUnmount
```ts
function useUnmount(effect: () => void): void
```
### useEffectAsync
```ts
function useEffectAsync(
effect: (signal: AbortSignal) => PromiseLike
, deps?: React.DependencyList
): void
```
### useAbortableCallback
```ts
function useAbortableCallback(
callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike
, deps?: React.DependencyList
): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise
```
### useUpdateEffect
```ts
function useUpdateEffect(
effect: EffectCallback
, deps?: React.DependencyList
): void
```
### useStateCycle
```ts
function useStateCycle(
orderedStates: NonEmptyArray
, initialStateIndex: number = 0
): [state: T, next: () => void]
```
### useIsMounted
```ts
function useIsMounted(): () => boolean
```
### useIsFirstRender
```ts
function useIsFirstRender(): () => boolean
```
### useIncrement
```ts
function useIncrement(
initialValue: number
): [value: number, increment: (step?: number) => void, reset: () => void]
```
### useResizeObserver
```ts
function useResizeObserver(
callback: ResizeObserverCallback
, refs: Array>
, deps?: React.DependencyList
): void
```
### useIntersectionObserver
```ts
function useIntersectionObserver(
callback: IntersectionObserverCallback
, options: IntersectionObserverInit | undefined
, refs: Array>
, deps?: React.DependencyList
): void
function useIntersectionObserver(
callback: IntersectionObserverCallback
, refs: Array>
, deps?: React.DependencyList
): void
```
### useStep
```ts
function useStep(
steps: NonEmptyArray
, initialStepIndex: number = 0
): [currentStep: T, next: () => void, previous: () => void]
```
### useForceUpdate
```ts
function useForceUpdate(): () => void
```
### useFiniteStateMachine
```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
### useRenderCounter
```ts
function useRenderCounter(): number
```
### useIIFE
```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
### useIIFEAsync
```ts
function useIIFEAsync(
iife: (signal: AbortSignal) => PromiseLike
, deps?: React.DependencyList
): void
```
### useMemoWithCleanup
```ts
function useMemoWithCleanup(
factory: () => T
, cleanup: (value: T) => void
, deps?: React.DependencyList
): T
```
### useGetSet
```ts
function useGetSet(
initialValue: T
): [get: () => T, set: (value: T) => void]
```
### useIsomorphicLayoutEffect
```ts
function useIsomorphicLayoutEffect(
effect: EffectCallback
, deps?: React.DependencyList
): void
```
### useDebounce
```ts
function useDebounce(
fn: (...args: Args) => void
, timeout: number
, deps?: React.DependencyList
): (...args: Args) => void
```
### useNumberInput
```ts
function useNumberInput(params: {
value: number
lazy?: boolean
onChange(value: number, isEnd: boolean): void
}): {
getInputProps(): Required
, 'value'
| 'onChange'
| 'onBlur'
>>
}
```
### useMediaQuery
```ts
function useMediaQuery(query: string): boolean
```