npm install ohook:smiling_face_with_three_hearts: Another React Hook Library
shell
yarn add ohook
or
npm i ohook
`
Usage
codesandbox example
$3
setState like Class Component.
`ts
const [state, setState] = useClassicalState({ isLoading: true, data: [] })
setState({ isLoading: false, data: [1, 2] }) // setState like Class Component
`
$3
Like useState, but can only become true or false.
- initialState - initial state or initial state setter as for useState
`ts
const [state, toggle] = useToggle() // detault: false
toggle() // toggle !state
toggle(true) // toggle true
toggle(false) // toggle false
`
$3
Run effect only when component is first mounted.
`ts
useMount(() => {
// DidMount ...
return () => {
// WillUnmount
}
})
`
$3
Run effect when component is visible after useMount and document visibilitychanged.
`ts
useShow(() => {
// Run when visible
return () => {
// Run when not visible
}
})
`
$3
Run effect only when component is unmounted.
`ts
useWillUnmount(() => {
// code
})
`
$3
Effect hook that ignores the first render (not invoked on mount)
`ts
function useDidUpdate(effect: React.EffectCallback, deps?: React.DependencyList): void
const state = useState(1)
useDidUpdate(() => {
// code
}, [state])
`
$3
handle the setTimeout timer function. Can be called repeatedly.
Returns:
- (Function): Returns the new timeout function.
`ts
useTimeout(fn: () => void, delay: number | undefined ,immediate: boolean);
const fn = useTimeout(() => {}, 1000, true) // auto run after 1s
const fn2 = useTimeout(() => {}, 1000, false) // run effect when u call it
fn() // Cancel the previous one and retime it.
fn2() // run after 1s
`
$3
handle the setTimeout timer function, base on useTimeout. Can be called repeatedly.
`ts
useInterval(fn: () => void, delay: number | undefined ,immediate: boolean);
const fn = useInterval(() => {}, 1000, true) // auto run after 1s
const fn2 = useInterval(() => {}, 1000, false) // run effect when u call it
fn() // Cancel the previous one and retime it.
fn2() // run after 1s
`
$3
handle the debounce function base on lodash.debounce.
- options: loadsh.debounce.options
Returns:
- (Function): Returns the new debounce function.
`tsx
// Use it like loadsh.debounce
const fn = useDebounceFn(() => {
fetch('...')
}, 1000)
`
$3
handle the throttle function base on lodash.throttle.
- options: loadsh.throttle.options
Returns:
- (Function): Returns the new throttled function.
`tsx
// Use it like loadsh.throttle
const fn = useThrottleFn(() => {
setState(/ /)
}, 1000)
`
$3
Triggers callback when user clicks outside the target element.
- withKeyboard - Click the esc button to trigger.
Returns:
- useRef().
`tsx
function useOnOutsideClick(
onOutsideClick: (event: MouseEvent | KeyboardEvent) => void,
isListening: boolean = false,
withKeyboard?: boolean = false
): React.RefObject
const ref = useOnOutSideClick(() => {}, true)
`
$3
The hook encapsulates onChange and value logic for form controls that obtains value through event.target.value. It also supports custom transformer and reset functionalities.
`tsx
const [value, { onChange, reset }] = useEventTarget({ initialValue: 'this is initial value' })
``