react-clock-styled

Installation

npm i react-clock-styled

then use on your component importing it.

import styled from "styled-components";
import {Clock} from "react-clock-styled";

const Main = styled.div`
min-height: 100vh;
display:flex;
justify-content:center;
align-items: center;
flex-wrap: wrap;
.clock{margin: 10px 150px;}
`


function App() {
  return (
    <Main>
    <div className="clock">
    <Clock size="sm" border="" color="#000957" handleColor="#344CB7" />
    </div>
    <div className="clock">
    <Clock size="sm"  />
    </div>
    <div className="clock">
    <Clock size="sm" border="6px solid" color="#94B3FD" handleColor="#FF5DA2" bg="#000D6B" />
    </div>
    <div className="clock">
    <Clock size="lg" border="4px dashed" />
    </div>
    </Main>
  );
}

export default App;

Result: https://au-clock.netlify.app/

Props:

prop	values	example
size	xxs, xs, sm, md, lg, xl, xxl	"xxs", "xs", "sm", "md", "lg", "xl", "xxl"
time	hh:mm:ss format	"10:00:00"
border	xxs, xs, sm, md, lg, xl, xxl	"1px dashed", "2px dotted", "2px solid", "4px double","6px groove","8px ridge","2px inset","2px outset","2px none","2px hidden"
bg	background color	"#000D6B"
handleColor	handle color	"#FF5DA2"
color	text color	"#94B3FD"

Please consider giving star on my github repo. Thanks.

Demo