Simple and customizable analog and digital clock component for React applications.
npm install react-clok
# or
yarn add react-clokimport { AnalogClock, DigitalClock } from "react-clok";
const App = () => (
<>
<AnalogClock />
<DigitalClock />
</>
);Note
These props are all optional. If you don't provide any props, the clock will be rendered with the default configuration.
| Name | Type | Default value | Note |
|---|---|---|---|
| frame |
{
size: CSSProperties['width']
color: CSSProperties['color']
width: CSSProperties['width']
boxShadow: CSSProperties['boxShadow']
}
|
{
size:'300px'
color: "#313638"
width: '6px'
boxShadow: '0 0 15px rgba(0, 0, 0, 0.3)'
}
|
Configuration for the clock frame |
| hourHand |
{
length: CSSProperties['width']
width: CSSProperties['width']
color: CSSProperties['color']
}
|
{
length: '30%'
width: '10px'
color: '#313638'
}
|
Configuration for the hour hand |
| minuteHand |
{
length: CSSProperties['width']
width: CSSProperties['width']
color: CSSProperties['color']
}
|
{
length: '40%'
width: '8px'
color: '#313638'
}
|
Configuration for the minute hand |
| secondHand |
{
length: CSSProperties['width']
width: CSSProperties['width']
color: CSSProperties['color']
}
|
{
length: '43%'
width: '2px'
color: 'darkred'
}
|
Configuration for the second hand |
| center |
{
size: number;
color: CSSProperties['color']
}
|
{
size: '5%'
color: '#313638'
}
|
Configuration for the center circle of the clock |
| mark |
{
primaryMark: {
width: CSSProperties['width']
color: CSSProperties['color']
show: boolean
}
secondaryMark: {
width: CSSProperties['width']
color: CSSProperties['color']
show: boolean
}
number: {
fontSize: CSSProperties['fontSize']
fontFamily: CSSProperties['fontFamily']
fontWeight: 'bold'
color: CSSProperties['color']
show: true
}
}
|
{
primaryMark: {
width: '6px'
color: '#313638'
show: boolean
}
secondaryMark: {
width: '3px'
color: '#313638'
show: true
}
number: {
fontSize: '1.5rem'
fontFamily: 'inherit';
fontWeight: 'bold'
color: '#313638'
show: true
}
}
|
Configuration for the marks of the clock including primary marks, secondary marks and the number on the clock. |
| Name | Type | Default value | Note |
|---|---|---|---|
| hourSegment |
{
size: number
color: CSSProperties['color']
width: number
gap: CSSProperties['gap']
}
|
{
size: 70
color: '#313638'
width: 5
gap: 10
}
|
Configuration for the hour segment. Due to the implementation, the size and width should be in pixel |
| minuteSegment |
{
size: number
color: CSSProperties['color']
width: number
gap: CSSProperties['gap']
}
|
{
size: 70
color: '#313638'
width: 5
gap: 10
}
|
Configuration for the minute segment. Due to the implementation, the size and width should be in pixel |
| secondSegment |
{
size: number
color: CSSProperties['color']
width: number
gap: CSSProperties['gap']
}
|
{
size: 70
color: '#313638'
width: 5
gap: 10
}
|
Configuration for the second segment. Due to the implementation, the size and width should be in pixel |
| separator |
{
show: boolean;
size: CSSProperties['width'];
color: CSSProperties['color']
gap: CSSProperties['gap']
}
|
{
show: true
size: '10px'
color: '#313638'
gap: 10
}
|
Configuration for the separator between segments |
If you have any ideas on how to improve this package, feel free to open an issue or submit a pull request. All contributions are welcome!
Licensed under the MIT License.
Made with 🍠 by Nhan Luong