Simple and customizable analog and digital clock component for React applications.
npm install react-clok
# or
yarn add react-clok
import { 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: number
}
|
{
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: number
}
|
{
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: number
}
|
{
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: number;
color: number;
gap: number;
}
|
{
show: true
size: 10
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
FAQs
An minimal and customizable analog and digital clock for React app.
We found that react-clok demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.