react-clock
a fully customizable, responsive analog clock in React.
basic usage
-
install as a dependency -
npm i @fazeelanizam13/react-clock
-
follow the example for a minimal version of the clock:
import ReactClock from '@fazeelanizam13/react-clock'
const App = () => {
return (
...
<ReactClock size={{ property: 'width', value: 50 }} />
...
)
}
props
name | type | default | example | description |
---|---|---|---|---|
size | { property: 'width' | 'height'; value: number; } |
- | { property: 'width', value: 50 } |
height or width of the clock as a percentage relative to parent. clock is set to have an as aspect ratio of 1/1 |
clockHandLength | { hour: number; minute: number; second: number; } |
{ hour: 25, minute: 34, second: 40 } |
- | length of each hand as a percentage of the clock diameter |
clockHandWidth | { hour: number; minute: number; second: number; } |
{ hour: 15, minute: 10, second: 5 } |
- | width of each hand in pixels |
clockFacePadding | number |
3 |
- | distance from clock face border to the numbers as a percentage of the clock diameter |
clockFaceStyle | React.CSSProperties |
{ backgroundColor: 'black', borderRadius: '100%' } |
- | |
clockHandStyle | React.CSSProperties |
{ backgroundColor: 'white', borderRadius: 10 } |
- | |
clockCenterStyle | React.CSSProperties |
{ backgroundColor: 'teal', borderRadius: '100%' } |
- | |
clockNumbersStyle | React.CSSProperties |
{ color: 'white', fontSize: '1.5rem' } |
- | font styling for clock numbers |
for developers
to setup locally:
- install dependencies -
npm install
- start dev server -
npm run start
to test the package:
- package the source code -
npm pack
- reference the generated
.tgz
file from thepackage.json
of the project you want to test from
"dependencies": {
"@fazeelanizam13/react-clock": "<path/to/file.tgz>"
}
- import and use as shown in the example:
import ReactClock from '@fazeelanizam13/react-clock'
const App = () => {
return (
...
<ReactClock size={{ property: 'width', value: 50 }} />
...
)
}