https://github.com/afek-sakaju/digital-clock-react
Digital Clock component for React applications (available as an NPM package) , developed during my time at the JLT coding bootcamp. Users can customize size, static behavior, and timestamp for custom time, with a toggle for 24-hour and AM/PM formats.
https://github.com/afek-sakaju/digital-clock-react
custom-npm-package digital-clock eslint jest jsdocs reactjs sass storybook
Last synced: 3 months ago
JSON representation
Digital Clock component for React applications (available as an NPM package) , developed during my time at the JLT coding bootcamp. Users can customize size, static behavior, and timestamp for custom time, with a toggle for 24-hour and AM/PM formats.
- Host: GitHub
- URL: https://github.com/afek-sakaju/digital-clock-react
- Owner: Afek-Sakaju
- Created: 2023-01-19T10:56:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-27T11:23:06.000Z (over 1 year ago)
- Last Synced: 2025-09-15T01:58:39.235Z (4 months ago)
- Topics: custom-npm-package, digital-clock, eslint, jest, jsdocs, reactjs, sass, storybook
- Language: JavaScript
- Homepage:
- Size: 4.97 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Digital-Clock-React
### This NPM package presents a digital clock component tailored for React applications. It utilizes ReactJS, JavaScript, SASS, and ESLint to create an intuitive and visually appealing clock feature. With easy integration capabilities, it seamlessly becomes a part of any application, enhancing its functionality.
---
**Live demo:** [digital-clock-react](http://Afek-Sakaju.github.io/digital-clock-react)
---
## Configuration Options
### The digital clock component offers a variety of configuration options to customize its appearance and functionality, including:
- **size**: You have the option to showcase the clock face in two sizes: medium or small.
- **timestamp**: The clock has the capability to exhibit a precise timestamp, enabling you to depict any desired time.
- **isMode24H(24/12 Hours Mode)**: The clock offers the flexibility to be presented in either the 12-hour or 24-hour format.
- **useInterval**: You can optionally use the clock as a static display by turning off the interval.
## Usage:
```js
import React from "react";
import { Clock } from "digital-clock-react";
import { myTimestamp } from "./consts";
function App() {
return (
);
}
export default App;
```
**Installation:**
- `npm install digital-clock-react`
Include the package in your project's dependencies.
**Development:**
- `npm run build-jsdocs`For JSDocs of the utils functions, after running open the 'index.html' file located inside the 'js-docs' folder.
---
### **Here's an example showcasing the utilization of the clock component:**
---
## Author
:octocat: **Afek Sakaju**
- LinkedIn: [@afeksa](https://www.linkedin.com/in/afeksa/)
- GitHub: [@Afek-Sakaju](https://github.com/Afek-Sakaju)