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 the package.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 }} />

    ...
  )
}