https://github.com/filipchalupa/react-use-clock

https://github.com/filipchalupa/react-use-clock

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/filipchalupa/react-use-clock
• Owner: FilipChalupa
• Created: 2022-11-11T15:54:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-16T12:24:51.000Z (12 months ago)
• Last Synced: 2025-04-08T21:31:53.080Z (22 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-use-clock
• Size: 2.9 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React useClock [![npm](https://img.shields.io/npm/v/react-use-clock.svg)](https://www.npmjs.com/package/react-use-clock) ![npm type definitions](https://img.shields.io/npm/types/react-use-clock.svg)

Simplified access to current hours, minutes, seconds.

[![screencast](https://raw.githubusercontent.com/FilipChalupa/react-use-clock/HEAD/screencast.gif)](https://react-use-clock.netlify.app)

## Installation

```bash

npm install react-use-clock

```

## How to use

```jsx

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

const MyClockComponent = () => {

	const clock = useClock()

	return (

		


			


				Time is:{' '}

				

					{clock.hours.toString().padStart(2, '0')}:

					{clock.minutes.toString().padStart(2, '0')}:

					{clock.seconds.toString().padStart(2, '0')}

				

			

			


				Date is:{' '}

				

					{clock.day}. {clock.month}. {clock.year}

				

			

			


				Using formatter:{' '}

				

					{clock.date.toLocaleTimeString('en', {

						day: 'numeric',

						month: 'long',

						year: 'numeric',

					})}

				

			

			


		

	)

}

```


Create your own wrapper component. You can get inspired by [Example here](src/stories/Example.tsx) and [Storybook here](https://react-use-clock.netlify.app).

## Development

Run `npm start` and `npm run storybook` parallelly.