Hooks

useDateFormat

Provider-agnostic date, datetime and time formatting context for Docyrus native components. Wired automatically by DocyrusTenantProvider, but works with any date library.

iOSAndroidExpo Go

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-date-format

The module exports useDateFormat() (hook), <DateFormatProvider> (provider), isDefaultDateFormatContext() and DateFormatContext. It has no runtime dependencies. The formatter comes from you or from a parent <DocyrusTenantProvider>.

Overview

useDateFormat() is the read side of a small context. Components call it to get { formatDate, formatDateTime, formatTime }. The provider above them decides how formatting happens.

  • No provider mounted: the hook returns a built-in sentinel that renders raw strings. Strings pass through String(value), Date objects through .toISOString(), null / undefined become ''.
  • <DocyrusTenantProvider> mounted: the formatters are backed by the tenant's dateUtils from @docyrus/app-utils, so values follow the tenant's dateFormat, dateTimeFormat and time zone.
  • Custom provider mounted: wrap date-fns, dayjs, Luxon or Intl with <DateFormatProvider>.

Usage

Consume in a component

import { Text } from 'react-native';

import { useDateFormat } from '@/hooks/docyrus-native/use-date-format';

export function EventRow({ startsAt }: { startsAt: string }) {
  const { formatDateTime } = useDateFormat();

  return <Text>{formatDateTime(startsAt)}</Text>;
}

Custom provider (date-fns)

import { format } from 'date-fns';

import { DateFormatProvider } from '@/hooks/docyrus-native/use-date-format';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <DateFormatProvider
      formatDate={v => format(new Date(v as string), 'dd/MM/yyyy')}
      formatDateTime={v => format(new Date(v as string), 'dd/MM/yyyy HH:mm')}
      formatTime={v => format(new Date(v as string), 'HH:mm')}>
      {children}
    </DateFormatProvider>
  );
}

API Reference

useDateFormat()

Takes no parameters. Returns: DateFormatContextValue.

FieldTypeDescription
formatDate(value: unknown) => stringDate-only output.
formatDateTime(value: unknown) => stringDate and time output.
formatTime(value: unknown) => stringTime-only output.

<DateFormatProvider>

PropTypeDefaultDescription
formatDateDateFormatFn—Required. Backs formatDate inside the tree.
formatDateTimeDateFormatFn—Required. Backs formatDateTime inside the tree.
formatTimeDateFormatFn—Required. Backs formatTime inside the tree.
childrenReactNode—Tree to wrap.

isDefaultDateFormatContext(ctx)

ParameterTypeDescription
ctxDateFormatContextValueA value returned by useDateFormat().

Returns: boolean. true when ctx is the no-provider sentinel rather than a real provider. Listing hooks use it so they don't shadow a cell's own fallback formatting when no provider is mounted.

DateFormatContext

The raw context (DateFormatContextValue | null, null without a provider). Native-only export: the native data-grid cell reads it directly. Prefer useDateFormat() in app code.

Type Exports

TypeDescription
DateFormatFn(value: unknown) => string.
DateFormatContextValueShape returned by useDateFormat().

On this page