Simplified access to current hours, minutes, seconds.
npm install react-use-clock
import { useClock } from 'react-use-clock'
const MyClockComponent = () => {
const clock = useClock()
return (
<div>
<p>
Time is:{' '}
<strong>
{clock.hours.toString().padStart(2, '0')}:
{clock.minutes.toString().padStart(2, '0')}:
{clock.seconds.toString().padStart(2, '0')}
</strong>
</p>
<p>
Date is:{' '}
<strong>
{clock.day}. {clock.month}. {clock.year}
</strong>
</p>
<p>
Using formatter:{' '}
<strong>
{clock.date.toLocaleTimeString('en', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</strong>
</p>
<div
style={{
'--hours': `${clock.hours}`,
'--minutes': `${clock.minutes}`,
'--seconds': `${clock.seconds}`,
}}
/>
</div>
)
}
Create your own wrapper component. You can get inspired by Example here and Storybook here.
Run npm start
and npm run storybook
parallelly.