react-simplikit

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	`usePageVisibility`
Device location	`useGeolocation`
Combine multiple refs into one	`mergeRefs`
Controlled-or-uncontrolled component state	`useControlledState`
Input onChange boilerplate	`useInputState`
Render one of several components by key	`SwitchCase`
Put a separator between children	`Separated`
Create a Context + Provider + hook without boilerplate	`buildContext`
Merge props objects (handlers chained, className joined)	`mergeProps`
Client-only rendering guard	`useIsClient`
Fixed-bottom element must avoid the on-screen keyboard (mobile web)	`useAvoidKeyboard`
Keyboard height / visibility (mobile web)	`useKeyboardHeight`, `isKeyboardVisible`
Notch / home-indicator insets (mobile web)	`useSafeAreaInset`, `getSafeAreaInset`
Lock body scroll while a sheet/modal is open (mobile web)	`useBodyScrollLock`

Workflow

Match the need against the table above, then confirm in the full catalog.
Read references/<name>.md for the signature and example. Do not rely on memory.
Import from react-simplikit.
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.
`useDebounce`	`useDebounce` is a React hook that returns a debounced version of the provided callback function.
`useDebouncedCallback`	`useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
`useDebouncedValue`	`useDebouncedValue` is a React hook that returns a debounced copy of the given value.
`useDoubleClick`	`useDoubleClick` is a React hook that differentiates between single and double click events.
`useGeolocation`	`useGeolocation` is a React hook that retrieves and tracks the user's geographical location.
`useImpressionRef`	`useImpressionRef` is a React hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
`useInputState`	`useInputState` is a React hook that manages an input state with optional value transformation.
`useIntersectionObserver`	`useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
`useInterval`	`useInterval` is a React hook that executes a function at a specified interval.
`useIsClient`	`useIsClient` is a React hook that returns `true` only in the client-side environment.
`useIsomorphicLayoutEffect`	`useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
`useKeyboardHeight`	`useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
`useList`	A React hook that manages an array as state.
`useLoading`	`useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
`useLongPress`	`useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
`useMap`	A React hook that manages a key-value Map as state.
`useNetworkStatus`	`useNetworkStatus` is a React hook that provides access to the Network Information API.
`useOutsideClickEffect`	`useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
`usePageVisibility`	`usePageVisibility` is a React hook that detects page visibility changes.
`usePreservedCallback`	`usePreservedCallback` is a React hook that maintains a stable reference to a callback function while ensuring it always has access to the latest state or props.
`usePreservedReference`	`usePreservedReference` is a React hook that helps maintain the reference of a value when it hasn't changed, while ensuring you can safely use the latest state.
`usePrevious`	`usePrevious` is a React hook that returns the previous value of the input state.
`useRefEffect`	`useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
`useSafeAreaInset`	`useSafeAreaInset` is a React hook that tracks safe area inset changes.
`useScrollDirection`	`useScrollDirection` is a React hook that detects scroll direction.
`useSet`	A React hook that manages a Set as state.
`useStorageState`	`useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
`useThrottle`	`useThrottle` is a React hook that creates a throttled version of a callback function.
`useThrottledCallback`	`useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
`useThrottledValue`	`useThrottledValue` is a React hook that returns a throttled copy of the given value.
`useTimeout`	`useTimeout` is a React hook that executes a callback function after a specified delay.
`useToggle`	`useToggle` is a React hook that simplifies managing a boolean state.
`useVisibilityEvent`	`useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
`useVisualViewport`	`useVisualViewport` is a React hook that tracks Visual Viewport changes.

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.
`isServer`	`isServer` is a utility function that checks if the code is running on the server.
`mergeProps`	`mergeProps` is a utility function that merges multiple props objects into a single object.
`mergeRefs`	This function takes multiple refs (RefObject or RefCallback) and returns a single ref that updates all provided refs.
`subscribeKeyboardHeight`	`subscribeKeyboardHeight` is a utility function that subscribes to changes in the on-screen keyboard height.

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