react-simplikit

name	react-simplikit
description	Selects and applies react-simplikit hooks, components and utils (useDebounce, useThrottle, useToggle, useBooleanState, useCounter, useList, useMap, useSet, useInterval, useTimeout, usePrevious, usePreservedCallback, useOutsideClickEffect, useIntersectionObserver, useStorageState, useLongPress, SwitchCase, Separated, mergeRefs, buildContext, ...) instead of hand-written equivalents, including the mobile-web keyboard, safe-area, visual viewport and body-scroll-lock hooks. Use when writing React state or effect logic, debouncing or throttling, boolean/counter/list/map/set state, intervals and timeouts, click-outside, long-press or double-click handling, viewport visibility or impression tracking, persisted state in localStorage/sessionStorage, conditional rendering, merging refs, React Context boilerplate, or SSR-safe browser access, and whenever the project depends on react-simplikit.
license	MIT
metadata	{"author":"toss"}

react-simplikit

Zero-dependency React hooks, components and utils in one package, react-simplikit. Alongside state/logic and browser-event hooks it covers the mobile-web problems — on-screen keyboard, safe-area insets, visual viewport, body scroll lock — that usually get hand-written.

Critical rules

• Check the catalog before hand-writing debounce, throttle, toggle, counter, list/map/set state, interval, timeout, previous-value, stable-callback, click-outside, long-press, intersection/visibility or storage-persisted-state logic. If a matching entry exists, use it. Reimplementing these is the most common mistake this skill exists to prevent.
• Never guess a signature. Before using an entry, read references/<name>.md — it has the parameter table, return shape and a working example.
• One import path, named imports only: import { useDebounce, useKeyboardHeight } from 'react-simplikit'. There is no subpath and no default export.
• SSR: never branch server-rendered markup on a value that comes from a browser API hook. Use useIsClient for client-only rendering instead of typeof window checks.
• Do not wrap or re-export these hooks in the consumer project just to rename them; use them directly so upgrades stay mechanical.

Common needs → use

Backticks in this table mark catalog entries only.

Need	Use
Debounce a callback (search input, resize)	useDebounce / useDebouncedCallback
Throttle a callback (scroll, pointer move)	useThrottle / useThrottledCallback
Boolean on/off, flip only	useToggle
Boolean on/off with explicit set-true / set-false	useBooleanState
Numeric state with bounds/step	useCounter
Array / Map / Set state with immutable helpers	useList / useMap / useSet
State persisted in localStorage / sessionStorage	useStorageState
Declarative setInterval / setTimeout	useInterval / useTimeout
Stable callback identity without stale closures	usePreservedCallback
Skip re-renders when an object is deep-equal	usePreservedReference
Run an async function in an effect	useAsyncEffect
Effect that runs only when a condition holds	useConditionalEffect
Side effect tied to a DOM ref (attach/detach)	useRefEffect
Click / tap outside an element (close menu, modal)	useOutsideClickEffect
Long press / double click	useLongPress / useDoubleClick
Element enters or leaves the viewport	useIntersectionObserver
How long an element stayed visible (impression tracking)	useImpressionRef / ImpressionArea
React to tab / page visibility changes with a callback	useVisibilityEvent
Read the current tab / page visibility as state

Workflow

1. Match the need against the table above, then confirm in the full catalog.
2. Read references/<name>.md for the signature and example. Do not rely on memory.
3. Import from react-simplikit.
4. If nothing matches, write plain React — do not stretch a hook past its documented purpose.

Catalog

hooks

Name	Description
useAsyncEffect	useAsyncEffect is a React hook for handling asynchronous side effects in React components.
useAvoidKeyboard	useAvoidKeyboard is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
useBodyScrollLock	useBodyScrollLock is a React hook that locks body scroll while the component is mounted.
useBooleanState	useBooleanState is a React hook that simplifies managing a boolean state.
useCallbackOncePerRender	useCallbackOncePerRender is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
useConditionalEffect	useConditionalEffect is a React hook that conditionally executes effects based on a predicate function.
useControlledState	useControlledState is a React hook that allows you to control both controlled and uncontrolled states.
useCounter	useCounter is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.

components

Name	Description
ImpressionArea	ImpressionArea is a component that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
Separated	Separated is a component that inserts a specified component between each child element.
SwitchCase	SwitchCase is a component that allows you to declaratively render components based on a given value, similar to a switch-case statement.

utils

Name	Description
buildContext	buildContext is a helper function that reduces repetitive code when defining React Context.
disableBodyScrollLock	disableBodyScrollLock is a utility function that unlocks the body scroll.
enableBodyScrollLock	enableBodyScrollLock is a utility function that locks the body scroll.
getKeyboardHeight	getKeyboardHeight is a utility function that returns the current on-screen keyboard height in pixels.
getSafeAreaInset	getSafeAreaInset is a utility function that returns all safe area insets in pixels as an object.
isAndroid	isAndroid is a utility function that detects whether the current device is running Android.
isIOS	isIOS is a utility function that detects whether the current device is running iOS or iPadOS.
isKeyboardVisible	isKeyboardVisible is a utility function that checks whether the on-screen keyboard is currently visible.

Learn more

• Docs: https://react-simplikit.slash.page
• Machine-readable index: https://react-simplikit.slash.page/llms.txt (full text: /llms-full.txt; any docs page + .md returns raw markdown)
• Source: https://github.com/toss/react-simplikit