Example page for github.com/martinheidegger/react-now-hook.

Install React Developer Tools for better analysis of behavior.

Environment supports Temporal.Instant: true

<NowSpan format=new Intl.DateTimeFormat('ja-JP', { timeStyle: 'short', dateStyle: 'long' }) />: 2026年7月24日 11:13

useNow(msInterval=1): 1784891585255

useNowInnerTextRef(msInterval=1):

useNow(msInterval=250): 1784891585250

<NowSpan msInterval=1/>: 1784891585255

<NowSpan msInterval=250 style={{background: 'lightgreen'}} format={CustomHTMLFormatter} />: 19f93d432e7

useDuration(from=1970-01-01T00:00:00Z, to=null, smallestUnit=second): 20,658 日 11 時間 13 分 5 秒

<DurationSpan from=1970-01-01T00:00:00Z smallestUnit="hour" format={durationSpanFormat}/>: 2,951 週間 1 日 11 時間

<DurationSpan from=1970-01-01T00:00:00Z smallestUnit="hour" format={[object Object]}/>: 495,803 時間

<DurationSpan from=1970-01-01T00:00:00Z smallestUnit="hour" format={durationHtmlFormat}/>: P20658D

useNow(msInterval=500): 1784891585000

useNow(msInterval=1000): 1784891585000

useNowInnerTextRef(msInterval=1000):

useNow(msInterval=2500): 1784891585000

useNowMemo(time => new Date(time).toString(), 1000):
Fri Jul 24 2026 11:13:05 GMT+0000 (Coordinated Universal Time)

useNowMemo(time => new Date(time).toString(), 60000):
Fri Jul 24 2026 11:13:05 GMT+0000 (Coordinated Universal Time)

<NowProvider time= >

useNowMemo(time => new Date(time).toString(), 1000):
Fri Jan 02 1970 00:00:00 GMT+0000 (Coordinated Universal Time)

<NowSpan msInterval=10/>: 86400000

<DurationSpan from=1970-01-01T00:00:00Z smallestUnit="hour" format={durationSpanFormat}/>: 1 日

<DurationSpan to=1970-01-15T00:00:00Z smallestUnit="hour" format={durationSpanFormat}/>: 1 週間 6 日

</NowProvider>