useLatestRef

Transform anything into a ref. The ref is always up to date in effects and DOM events.

Installation

npm install @1hook/use-latest-ref

import { useLatestRef } from '@1hook/use-latest-ref'

Transform any value into a ref:

const ref = useLatestRef(value)

Use ref.current to read the latest value in effects, changes to value do not trigger the effect.

useEffect(() => {
  // only runs once
  console.log('value', ref.current)
}, [ref])

useIsOnline

Track the online state of the browser.

useLockBodyScroll

Lock and unlock the body scroll without layout shift.