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