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' }) />: 2025年8月1日 11:46

useNow(msInterval=1): 1754048766184

useNowInnerTextRef(msInterval=1):

useNow(msInterval=250): 1754048766000

<NowSpan msInterval=1/>: 1754048766184

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

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

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

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

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

useNow(msInterval=500): 1754048766000

useNow(msInterval=1000): 1754048766000

useNowInnerTextRef(msInterval=1000):

useNow(msInterval=2500): 1754048765000

useNowMemo(time => new Date(time).toString(), 1000):
Fri Aug 01 2025 11:46:06 GMT+0000 (Coordinated Universal Time)

useNowMemo(time => new Date(time).toString(), 60000):
Fri Aug 01 2025 11:46:06 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>