@temboplus/frontend-react-core

React hooks that wrap pure helpers from @temboplus/frontend-core for use in React applications across the TemboPlus platform.

Today the package ships one feature area — timezone — with more to be added as React-flavored counterparts to frontend-core utilities are needed.

Installation

bun add @temboplus/frontend-react-core
# or
npm install @temboplus/frontend-react-core

Peer dependency:

bun add react

Runtime dependency (auto-installed):

• @temboplus/frontend-core — the pure utilities and domain entities the hooks wrap.

Subpath imports

Import the focused surface or the root entry; both work:

// Focused (recommended — keeps your bundles honest):
import { useTimezone } from "@temboplus/frontend-react-core/timezone";

// Or the root:
import { useTimezone } from "@temboplus/frontend-react-core";

Timezone hooks

Each app passes its own storageKey so timezone preferences don't collide across products sharing a browser origin. Wrap once in your app and use the bare hook everywhere:

// src/shared/lib/timezone.ts (or similar)
import {
  useTimezone as useTimezoneBase,
  useTimezoneDate as useTimezoneDateBase,
  useFormatDate as useFormatDateBase,
  useFormatDateTime as useFormatDateTimeBase,
  useFormatTime as useFormatTimeBase,
} from "@temboplus/frontend-react-core/timezone";

const STORAGE_KEY = "myapp.timezone";

export const useTimezone = () => useTimezoneBase({ storageKey: STORAGE_KEY });
export const useTimezoneDate = () => useTimezoneDateBase({ storageKey: STORAGE_KEY });
export const useFormatDate = () => useFormatDateBase({ storageKey: STORAGE_KEY });
export const useFormatDateTime = () => useFormatDateTimeBase({ storageKey: STORAGE_KEY });
export const useFormatTime = () => useFormatTimeBase({ storageKey: STORAGE_KEY });

useTimezone()

const [timezone, setTimezone] = useTimezone();

• Reads from localStorage[storageKey] on mount (after first paint, to avoid SSR mismatch).
• Falls back to DEFAULT_TIMEZONE ("Africa/Nairobi") when nothing's stored.
• setTimezone(next) validates against Intl.supportedValuesOf("timeZone") plus TemboPlus operating/anchor zones, then persists.

useTimezoneDate()

Boundary helpers bound to the current timezone preference. Re-memoises when the preference changes.

const { tz, startOfDay, endOfDay, parse, sameDay, toUtc } = useTimezoneDate();

const utcStart = startOfDay(pickerDate);   // UTC instant of midnight in `tz`
const utcEnd = endOfDay(pickerDate);
const zoned = parse("2026-05-15T00:00:00Z"); // TZDate; getDate() reports `tz` wall clock

useFormatDate*()

Reactive formatters. Re-render automatically when the user changes their timezone preference.

const fmtDateTime = useFormatDateTime();
return <span>{fmtDateTime(row.createdAt)}</span>;  // "25 MAY 2026, 02:30 PM"

Available variants:

| Hook | Output | |---|---| | useFormatDate | 25 MAY 2026 | | useFormatDateTime | 25 MAY 2026, 02:30 PM | | useFormatDateTimeWithSeconds | 25 MAY 2026, 02:30:45 PM | | useFormatTime | 02:30 PM |

For non-React call sites, the imperative siblings live in @temboplus/frontend-core:

import { formatDateTime } from "@temboplus/frontend-core";

formatDateTime(date, "Africa/Nairobi");  // "25 MAY 2026, 02:30 PM"

Development

Bun for everything, Biome for lint+format, mise for the toolchain pin.

mise install        # one-time: installs pinned Bun
bun install
bun run dev         # rollup build in watch mode

| Script | Does | | --- | --- | | bun run dev | Rollup build in watch mode | | bun run build | tsc declarations + Rollup bundles to dist/ (CJS + ESM, each with a "use client" banner) | | bun run test | bun:test (passes with zero tests; smoke test only — bun:test has no DOM, so real hook tests live in consumer apps) | | bun run lint | Biome check | | bun run format | Biome auto-fix | | bun run typecheck | tsc --noEmit |

Tag-driven releases via .github/workflows/release.yml — update CHANGELOG.md, bump package.json, push a vX.Y.Z tag.

License

ISC © TemboPlus