cleanup-mobx

Setup/cleanup utilities for MobX reactions, timers, animation frames, idle callbacks, and DOM event listeners.

The API follows the React useEffect convention: a setup callback may return a cleanup function, and the utility guarantees that cleanup runs when the effect is replaced or disposed.

Install

pnpm add cleanup-mobx mobx

mobx is a peer dependency. react is only used by Storybook examples and TypeScript RefObject typing.

Usage

import { cleanupReaction, cleanupTimeout } from "cleanup-mobx";

const disposeReaction = cleanupReaction(
  () => store.activeId,
  (activeId) => {
    const subscription = api.subscribe(activeId);

    return () => {
      subscription.unsubscribe();
    };
  },
);

const disposeTimeout = cleanupTimeout(() => {
  store.hideSuccess();
}, "1s");

// Call dispose at the appropriate lifecycle stage.
disposeTimeout();
disposeReaction();

Each public utility is also available as a package subpath:

import { cleanupReaction } from "cleanup-mobx/cleanupReaction";
import { cleanupTimeout } from "cleanup-mobx/cleanupTimeout";

API

• cleanupReaction
• cleanupReactionList
• cleanupReactionPrimitiveList
• cleanupReactionMap
• cleanupAutorun
• cleanupEventListener
• cleanupWindowEventListener
• cleanupDocumentEventListener
• cleanupBodyEventListener
• cleanupSelectorEventListener
• cleanupTimeout
• cleanupInterval
• cleanupRequestAnimationFrame
• cleanupIdleCallback

Scripts

• pnpm dev - starts Storybook locally on port 6007.
• pnpm storybook - starts Storybook locally on port 6007.
• pnpm storybook:build - builds the static Storybook site into storybook-static.
• pnpm build - builds TypeScript declarations and the library bundle.
• pnpm build:types - emits TypeScript declaration files for the package.
• pnpm typecheck - runs TypeScript checks without emitting files.
• pnpm test - runs the Vitest test suite once.
• pnpm lint - runs the linter and applies automatic fixes.
• pnpm lint:check - runs the linter without applying fixes.
• pnpm format - formats the project files.
• pnpm format:check - checks formatting without changing files.
• pnpm check - runs linting, formatting checks, type checks, tests, the package build, and the Storybook build.
• pnpm pack:dry - previews the npm package contents without publishing.
• pnpm prepack - runs the full project check before packaging.

Storybook

Storybook contains runnable examples and API docs generated by storybook-addon-jsdoc-to-mdx.

Published Storybook: https://meded90.github.io/cleanup-mobx/

pnpm storybook
pnpm storybook:build

The static output is storybook-static, ready for GitHub Pages deployment.