List Of Hooks

State

• [x] useClassicalState
• [x] useToggle

LifeCycle

• [x] useMount
• [x] useShow
• [x] useWillUnmount
• [x] useDidUpdate

SideEffect

• [x] useTimeout
• [x] useInterval
• [x] useDebounceFn
• [x] useThrottleFn

DOM

• [x] useOnOutsideClick
• [x] useEventTarget
• [ ] Waiting for inspiration ···

Installation

yarn add ohook
# or
npm i ohook

Usage

codesandbox example

useClassicalState

setState like Class Component.

const [state, setState] = useClassicalState({ isLoading: true, data: [] })

setState({ isLoading: false, data: [1, 2] }) // setState like Class Component

useToggle

Like useState, but can only become true or false.

• initialState - initial state or initial state setter as for useState

const [state, toggle] = useToggle() // detault: false

toggle() // toggle !state
toggle(true) // toggle true
toggle(false) // toggle false

useMount

Run effect only when component is first mounted.

useMount(() => {
  // DidMount ...
  return () => {
    // WillUnmount
  }
})

useShow

Run effect when component is visible after useMount and document visibilitychanged.

useShow(() => {
  // Run when visible

  return () => {
    // Run when not visible
  }
})

useWillUnmount

Run effect only when component is unmounted.

useWillUnmount(() => {
  // code
})

useDidUpdate

Effect hook that ignores the first render (not invoked on mount)

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

const state = useState(1)

useDidUpdate(() => {
  // code
}, [state])

useTimeout

handle the setTimeout timer function. Can be called repeatedly.

Returns:

• (Function): Returns the new timeout function.

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

useInterval

handle the setTimeout timer function, base on useTimeout. Can be called repeatedly.

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

useDebounceFn

handle the debounce function base on lodash.debounce.

• options: loadsh.debounce.options

Returns:

• (Function): Returns the new debounce function.

// Use it like loadsh.debounce
const fn = useDebounceFn(() => {
  fetch('...')
}, 1000)

<input onChange={fn} />

useThrottleFn

handle the throttle function base on lodash.throttle.

• options: loadsh.throttle.options

Returns:

• (Function): Returns the new throttled function.

// Use it like loadsh.throttle
const fn = useThrottleFn(() => {
  setState(/* */)
}, 1000)

<div onScroll={fn} />

useOnOutsideClick

Triggers callback when user clicks outside the target element.

• withKeyboard - Click the esc button to trigger.

Returns:

• useRef().

function useOnOutsideClick<T extends HTMLElement>(
  onOutsideClick: (event: MouseEvent | KeyboardEvent) => void,
  isListening: boolean = false,
  withKeyboard?: boolean = false
): React.RefObject<T>

const ref = useOnOutSideClick(() => {}, true)


<div ref={ref} />

useEventTarget

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.

const [value, {  onChange, reset }] = useEventTarget({ initialValue: 'this is initial value' })


<input onChange={fn} />
<button onClick={reset}/>