React useClock npm npm type definitions

Simplified access to current hours, minutes, seconds.

screencast

Installation

npm install react-use-clock

How to use

import { useClock } from 'react-use-clock'

const MyClockComponent = () => {
	const clock = useClock()

	return (
		<div>
			Time is:{' '}
			<strong>
				{clock.hours.toString().padStart(2, '0')}:
				{clock.minutes.toString().padStart(2, '0')}:
				{clock.seconds.toString().padStart(2, '0')}
			</strong>
			<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.

Development

Run npm start and npm run storybook parallelly.

GitHub

View Github