Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wojtekmaj/react-clock
An analog clock for your React app.
https://github.com/wojtekmaj/react-clock
analog-clock clock digital-clock react time
Last synced: about 2 months ago
JSON representation
An analog clock for your React app.
- Host: GitHub
- URL: https://github.com/wojtekmaj/react-clock
- Owner: wojtekmaj
- License: mit
- Created: 2017-11-11T18:41:11.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T10:27:04.000Z (5 months ago)
- Last Synced: 2024-05-02T05:33:24.707Z (5 months ago)
- Topics: analog-clock, clock, digital-clock, react, time
- Language: TypeScript
- Homepage: http://projects.wojtekmaj.pl/react-clock
- Size: 6.17 MB
- Stars: 320
- Watchers: 9
- Forks: 35
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](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 `
## License
The MIT License.
## Author
