simple-nobody-react-hooks

@feiyeyuji/simple-nobody-react-hooks is a TypeScript-first React Hooks collection. Version 0.1.0 contains an independent source implementation aligned with the documented top-level API of react-use 17.6.0, plus additional state, browser, task, and rendering hooks.

All hook, factory, component, and utility source files live in this repository under src/. The package does not install or execute react-use; the initial local source tree was ported from its Unlicense-licensed release as the behavior baseline.

Install

npm install @feiyeyuji/simple-nobody-react-hooks react react-dom

React and ReactDOM are peer dependencies and must be >=16.8.0. Immer is included as a runtime dependency for useActions and useImmer.

Usage

import { useCounter, useToggle } from "@feiyeyuji/simple-nobody-react-hooks";

export function Counter() {
  const [count, { inc, dec }] = useCounter(0);
  const [enabled, toggle] = useToggle(false);

  return (
    <section>
      <button onClick={() => dec()}>-</button>
      <output>{count}</output>
      <button onClick={() => inc()}>+</button>
      <button onClick={() => toggle()}>
        {enabled ? "enabled" : "disabled"}
      </button>
    </section>
  );
}

Actions And Immer

useActions uses Immer by default, so action implementations can update draft state directly. It returns [state, setState, actions, reset]. Use useActionsNative when reducers should return the next state without Immer.

import { useActions } from "@feiyeyuji/simple-nobody-react-hooks";

export function TodoCount() {
  const [state, , actions, reset] = useActions(
    { count: 0 },
    {
      add(draft, amount: number) {
        draft.count += amount;
      },
    }
  );

  return (
    <>
      <output>{state.count}</output>
      <button onClick={() => actions.add(1)}>Add</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}

API

Version 0.1.0 implements every named top-level export in the selected baseline, including sensor, UI, animation, side-effect, lifecycle, state, and utility hooks. Representative hooks include:

• State: useBoolean, useCounter, useList, useMap, useSet, useToggle, useStateList, useGetSet
• Browser and sensors: useBattery, useGeolocation, useMedia, useMouse, useNetworkState, usePermission
• UI and interaction: useClickAway, useDrop, useFullscreen, useHover, useKey, useLongPress
• Side effects: useCookie, useCopyToClipboard, useLocalStorage, useSessionStorage, useTitle
• Lifecycle and async: useAsync, useEffectOnce, useMount, usePromise, useUnmount, useUpdateEffect
• Timing and animation: useDebounce, useInterval, useRaf, useThrottle, useTween

Additional exports include:

• State and history: useActions, useActionsNative, useArray, useControlled, useHistory, useImmer, useObject, useResetState, useStateRealtime
• Async and callbacks: useAsyncEffect, useCatchError, useDebounceFn, useDeepEffect, useDeepMemo, useEventBus, EventBus, usePersistCallback, useThread, useThreadPool, useTimer, useUpload
• Browser and DOM: useBroadcastChannel, useFocusWithin, useInView, useLazyImage, useMutation, usePageVisibility, usePortal, useScript, useStorage, useStyle, useSyncScroll, useUrlParams, useVirtualList, useWaterMark
• Utilities: useForceUpdate, useIsMounted, historyReducer

Use top-level imports from this package. Internal source paths are not part of its public API.

Source Layout

• src/use*.ts and src/use*.tsx: hook implementations
• src/factory/: hook factory helpers such as createGlobalState and createReducer
• src/misc/: shared internal helpers and types
• src/component/: React component helpers retained with the source port
• src/index.ts: the public top-level API

The source tree also retains the optional, non-top-level useKeyboardJs and useSpring implementations for future opt-in exposure.

Package Output

The package builds:

• ESM output for import
• CommonJS output for require
• TypeScript declarations

The release build compiles this repository's local TypeScript source into both module formats so Node ESM consumers receive the same named exports as CommonJS consumers. The useCookie implementation bundles patched [email protected] because older releases in the original baseline's dependency range are affected by a high-severity cookie attribute injection advisory.

Development

npm install
npm run typecheck
npm test
npm run build
npm run test:types
npm run test:package

The tests check the public export set and smoke-test state, Immer action, history, and cookie behavior from local source. Package checks additionally type-check consumer imports against the built declaration tree, then load the built ESM and CommonJS entry points to ensure that each publishes every expected named export.