[](https://www.npmjs.com/package/react-clock)  [](https://github.com/wojtekmaj/react-clock/actions)
# react-clock
An analog clock for your React app.
## tl;dr
- Install by executing `npm install react-clock` or `yarn add react-clock`.
- Import by adding `import Clock from 'react-clock'`.
- Use by adding ``.
## Demo
A minimal demo page can be found in `sample` directory.
[Online demo](https://projects.wojtekmaj.pl/react-clock/) is also available!
## Installation
Add react-clock to your project by executing `npm install react-clock` or `yarn add react-clock`.
### Usage
Here's an example of basic usage:
```tsx
import { useEffect, useState } from 'react';
import Clock from 'react-clock';
function MyApp() {
const [value, setValue] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => setValue(new Date()), 1000);
return () => {
clearInterval(interval);
};
}, []);
return (
Current time:
);
}
```
### Custom styling
If you want to use default react-clock styling to build upon it, you can import react-clock's styles by using:
```ts
import 'react-clock/dist/Clock.css';
```
## User guide
### Clock
Displays a complete clock.
#### Props
| Prop name | Description | Default value | Example values |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------- |
| className | Class name(s) that will be added along with `"react-clock"` to the main react-clock `