⚓ React Captain

A collection of strongly typed React hooks and contexts.

$ yarn add react-captain

useClickOutside

Capture click event outside of the given HTMLElement.
Click outside
Except here

Definition


type UseClickOutside = (
  ref: React.RefObject<Node>,
  fn: ClickOutsideFn,
  opts?: Partial<ClickOutsideOpts>,
) => void

type ClickOutsideFn = (evt: Event) => void
type ClickOutsideOpts = {
  root: React.RefObject<Node>
  except: React.RefObject<Node>[]
  listenerType: keyof DocumentEventMap
  listenerOpts: boolean | AddEventListenerOptions
}

Usage


const ref = useRef<HTMLDivElement | null>(null)
useClickOutside(ref, fn)

useDebounce

Add debounce to a handler.

Definition


type UseDebounce = <T extends Function>(
  fn: T,
  opts?: number | Partial<DebounceOpts>,
) => Debounce<T>

type DebounceOpts = {
  delay: number
  persist: boolean
}

type Debounce<T extends Function> = {
  (...params: Parameters<T>): void
  abort: () => void
  terminate: () => void
}

Usage


const handler = useDebounce(() => console.log("Hello!"), 1000)

<button onClick={handler}>
  Say hello with delay
</button>
<button onClick={handler.abort}>
  Abort
</button>
<button onClick={handler.terminate}>
  Terminate
</button>

useTimeout

A wrapper around setTimeout.

Definition


type UseTimeout = <T extends Function>(
  fn: T,
  opts?: number | Partial<TimeoutOpts>,
) => Timeout<T>

type TimeoutOpts = {
  delay: number
  persist: boolean
}

type Timeout<T extends Function> = {
  (...params: Parameters<T>): void
  abort: () => void
  terminate: () => void
}

Usage


const handler = useTimeout(() => console.log("Hello!"))

<button onClick={handler}>
  Say hello with delay
</button>
<button onClick={handler.abort}>
  Abort
</button>
<button onClick={handler.terminate}>
  Terminate
</button>

useInterval0

A wrapper around setInterval.

Definition


type UseInterval = (
  fn: IntervalFn,
  opts?: number | Partial<IntervalOpts>,
) => ToggleState

type IntervalFn = () => void
type IntervalOpts = {
  delay: number
  autoStart: boolean
}

Usage


const [isOn, toggle] = useInterval(() => {
  console.log("Hello with interval!")
})

useStoredState

A persistant useState, based on React.useState and localForage.
Current value: value

Definition


type UseStoredState = <T>(
  name: string,
  opts?: T | Partial<StoredStateOpts<T>>,
) => [T, (val: T) => Promise<void>, boolean]

type StoredStateDriver = "LOCALSTORAGE" | "WEBSQL" | "INDEXEDDB"

type StoredStateOpts<T> = {
  defaultVal: T
  driver: StoredStateDriver
}

Usage


const [val, setVal, isReady] = useStoredState("key", "defaultValue")
return isReady ? val : null

useToggleOFF

A React.useState for booleans.

Definition


type UseToggle = (defaultVal?: any) => ToggleState
type ToggleState = [boolean, (val?: any) => void]

Usage


const [isOn, toggle] = useToggle()

useSubject0

A wrapper around rxjs.Subject.

Definition


type UseSubject = <T>(
  subject$: Subject<T>,
  fn: SubjectFn<T>,
) => void

type SubjectFn<T> = (val: T) => void

Usage


useSubject(subject$, fn)

useBehaviorSubject0

A wrapper around rxjs.BehaviorSubject.

Definition


type UseBehaviorSubject = <T>(
  subject$: BehaviorSubject<T>,
  fn?: BehaviorSubjectFn<T>,
) => BehaviorSubjectState<T>

type BehaviorSubjectState<T> = [T, BehaviorSubjectFn<T>]
type BehaviorSubjectFn<T> = (val: T) => void

Usage


const [val, setVal] = useBehaviorSubject(subject$, fn)