DateFormat

Formats dates using date-fns patterns. Supports relative time ("3 hours ago"), toggling between relative and absolute display, and auto-refreshing relative times.

Import

import { DateFormat } from 'reablocks';

DateFormat Props

Basic Usage

<DateFormat date={new Date()} />

Relative Time

<DateFormat date={someDate} fromNow />
{/* Renders: "3 hours ago", "2 days ago", "now" (if < 30 seconds) */}

Relative time auto-refreshes: every 60s for < 1 hour, every hour for < 1 day.

Toggle Between Relative and Absolute

<DateFormat date={new Date()} fromNow allowToggle />
{/* Click to toggle between "2 minutes ago" and "04/15/26 02:30:00 PM" */}

String Dates

<DateFormat date="2022-05-25T16:03:12.2085" />

Empty State

<DateFormat date={null} />                       {/* "N/A" */}
<DateFormat date={null} emptyMessage="No date" /> {/* "No date" */}

DateFormatTheme Interface

interface DateFormatTheme {
  base: string;         // Base styles
  interactive: string;  // Styles when allowToggle is true (cursor-pointer, hover:underline)
}