Reference
React Components
Use Tarikh React components when you want semantic date output and predictable accessibility.
Start Here
Import from @coreify/tarikh/react when you want semantic <time> output in React.
What You Get
| Component | Use it for |
|---|---|
Tarikh | Standard date rendering |
Tarikh.Relative | Relative time like today or yesterday |
Tarikh.Bangla | Bangla calendar output |
Tarikh.Hijri | Hijri calendar output |
import { Tarikh } from "@coreify/tarikh/react";
const date = "2026-03-31";
<Tarikh value={date} />
<Tarikh.Relative value={date} />
<Tarikh.Bangla value={date} locale="bn-BD" />
<Tarikh.Hijri value={date} locale="bn-BD" />What You Get
| Prop | Behavior |
|---|---|
value | Accepts Date, timestamps, and date strings |
srLabel | Overrides the generated aria-label |
aria-label | Used when srLabel is not provided |
All components render semantic <time> elements with dateTime and aria-label.
Example
import { Tarikh } from "@coreify/tarikh/react";
export function CardDate() {
return (
<Tarikh
value="2026-03-31"
locale="bn-BD"
srLabel="Published date"
/>
);
}Compound Components
| Component | Use case |
|---|---|
Tarikh.Relative | Relative time like today, yesterday, and tomorrow |
Tarikh.Bangla | Bangla calendar output |
Tarikh.Hijri | Hijri calendar output |
Notes
| Detail | Notes |
|---|---|
| Semantics | Renders <time> elements with dateTime and aria-label |
| Runtime | SSR-safe, tree-shakeable, and zero runtime dependencies beyond React |
| Scope | Keep React imports isolated under @coreify/tarikh/react |