@lacspace/hooks

24+ essential hooks

v1.0.0React Kit — hooks, state, data & UX zero deps · react 18+TypeScript

On this page

When to use it
Overview
Install
Quick example
Key API
Tips
Watch out for
More in React Kit — hooks, state, data & UX

When to use it

Any React or Next.js app that keeps re-implementing the same utility hooks — persisted state, debouncing, media queries, click-outside, clipboard. Import the battle-tested version instead.

Overview

The hooks you reach for on every project — useLocalStorage, useDebounce, useMediaQuery, useOnClickOutside, useCopyToClipboard, useInterval, useIntersectionObserver and 20 more. Every one SSR-safe, fully typed and tree-shakeable.

Install

$ npm install @lacspace/hooks

Quick example

@lacspace/hooksts

const [v, setV] = useLocalStorage("key", 0)

Key API

useLocalStorage(key, initial)Persisted, cross-tab state → [value, setValue, remove].

useDebounce(value, ms) / useThrottleDebounced or throttled value; useDebouncedCallback for actions.

useMediaQuery(q) / useWindowSizeSSR-safe responsive state.

useOnClickOutside(ref, fn) / useHoverDOM interaction hooks.

useCopyToClipboard()[copied, copy(text)] with a graceful fallback.

useInterval / useTimeout / useIdlePausable timers and idle detection.

+ 18 moreusePrevious, useToggle, useCounter, useDisclosure, useIntersectionObserver, useEventListener, useOnlineStatus, useLockBodyScroll, useUpdateEffect…

Tips

Every hook is SSR-safe: on the server it returns a sensible default (e.g. `useMediaQuery` is `false`, storage hooks return your initial value) and hydrates in an effect — no `window is not defined`.

`useLocalStorage`/`useSessionStorage` sync across components and browser tabs automatically via the `storage` event; the returned `remove()` clears the key.

Reach for `useDebouncedCallback` (not just `useDebounce`) when you need to debounce an action like search-as-you-type — it exposes a `.cancel()`.

It tree-shakes: importing one hook ships only that hook.

Watch out for

This is a hooks library with no `"use client"` directive — call the hooks from your own Client Components (files with `"use client"`), never from Server Components.

`useLocalStorage` stores JSON — values must be serializable (no functions, `Map`, `Set` or class instances).

Looking for the complete API and more examples? The npm page and GitHub README carry the full reference — or grab the PDF.

Lacspace

@lacspace/hooks

24+ essential hooks

v1.0.0React Kit — hooks, state, data & UX zero deps · react 18+TypeScript

Download PDF npm Source

On this page

When to use it
Overview
Install
Quick example
Key API
Tips
Watch out for
More in React Kit — hooks, state, data & UX

When to use it

Any React or Next.js app that keeps re-implementing the same utility hooks — persisted state, debouncing, media queries, click-outside, clipboard. Import the battle-tested version instead.

Overview

Install

$ npm install @lacspace/hooks

Quick example

@lacspace/hooksts

const [v, setV] = useLocalStorage("key", 0)

Key API

useLocalStorage(key, initial)Persisted, cross-tab state → [value, setValue, remove].

useDebounce(value, ms) / useThrottleDebounced or throttled value; useDebouncedCallback for actions.

useMediaQuery(q) / useWindowSizeSSR-safe responsive state.

useOnClickOutside(ref, fn) / useHoverDOM interaction hooks.

useCopyToClipboard()[copied, copy(text)] with a graceful fallback.

useInterval / useTimeout / useIdlePausable timers and idle detection.

+ 18 moreusePrevious, useToggle, useCounter, useDisclosure, useIntersectionObserver, useEventListener, useOnlineStatus, useLockBodyScroll, useUpdateEffect…

Tips

`useLocalStorage`/`useSessionStorage` sync across components and browser tabs automatically via the `storage` event; the returned `remove()` clears the key.

Reach for `useDebouncedCallback` (not just `useDebounce`) when you need to debounce an action like search-as-you-type — it exposes a `.cancel()`.

It tree-shakes: importing one hook ships only that hook.

Watch out for

This is a hooks library with no `"use client"` directive — call the hooks from your own Client Components (files with `"use client"`), never from Server Components.

`useLocalStorage` stores JSON — values must be serializable (no functions, `Map`, `Set` or class instances).

Looking for the complete API and more examples? The npm page and GitHub README carry the full reference — or grab the PDF.

When to use it

Overview

Install

Quick example

Key API

Tips

Watch out for

More in React Kit — hooks, state, data & UX

When to use it

Overview

Install

Quick example

Key API

Tips

Watch out for

More in React Kit — hooks, state, data & UX