diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx
index b30924f4956..12eb1776669 100644
--- a/packages/react/src/RelativeTime/RelativeTime.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.tsx
@@ -6,11 +6,11 @@ import {createComponent} from '../utils/custom-element'
const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time')
const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'}
-function RelativeTime({date, datetime, ...props}: RelativeTimeProps) {
+function RelativeTime({date, datetime, children, ...props}: RelativeTimeProps) {
if (datetime) date = new Date(datetime)
return (
- {date?.toLocaleDateString('en', localeOptions) || ''}
+ {children || date?.toLocaleDateString('en', localeOptions) || ''}
)
}
diff --git a/packages/react/src/__tests__/RelativeTime.test.tsx b/packages/react/src/__tests__/RelativeTime.test.tsx
index a8903aee588..9511663773a 100644
--- a/packages/react/src/__tests__/RelativeTime.test.tsx
+++ b/packages/react/src/__tests__/RelativeTime.test.tsx
@@ -30,4 +30,11 @@ describe('RelativeTime', () => {
const date = new Date('2024-03-07T12:22:48.123Z')
expect(render().children).toEqual(['Mar 7, 2024'])
})
+
+ it('renders children if passed', () => {
+ const date = new Date('2024-03-07T12:22:48.123Z')
+ expect(render(server rendered date).children).toEqual([
+ 'server rendered date',
+ ])
+ })
})