Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brendon1555/react-analogue-clock
An Analog Clock built with react and typescript
https://github.com/brendon1555/react-analogue-clock
hacktoberfest react styled-components typescript
Last synced: 3 months ago
JSON representation
An Analog Clock built with react and typescript
- Host: GitHub
- URL: https://github.com/brendon1555/react-analogue-clock
- Owner: brendon1555
- License: mit
- Created: 2020-03-11T12:28:17.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T15:49:21.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T00:03:42.242Z (3 months ago)
- Topics: hacktoberfest, react, styled-components, typescript
- Language: TypeScript
- Homepage: https://brendon1555.github.io/react-analogue-clock/
- Size: 7.31 MB
- Stars: 3
- Watchers: 2
- Forks: 4
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://github.com/brendon1555/react-analogue-clock)
# React Analogue Clock
> A customizable analogue clock built with styled-components in React
[](https://github.com/brendon1555/react-analogue-clock/issues)
[](https://david-dm.org/brendon1555/react-analogue-clock?type=dev)
[](https://david-dm.org/brendon1555/react-analogue-clock?type=peer)
[](http://badges.mit-license.org)
---
## Demo
[Online demo](https://brendon1555.github.io/react-analogue-clock/) is available
---
## Installation
```shell
$ yarn add styled-components react-analogue-clock
```
or
```shell
$ npm install --save styled-components react-analogue-clock
```
---
## Usage
```JSX
// code away!
import AnalogueClock from 'react-analogue-clock';
const clockOptions = {
baseColor: '#ffffff',
borderColor: '#000000',
borderWidth: 5,
centerColor: '#000000',
handColors: {
hour: '#000000',
minute: '#000000',
second: '#000000',
},
notchColor: '#000000',
numbersColor: '#000000',
showNumbers: true,
size: 300
}
```
or
#### Test it out with Storybook
```shell
$ yarn storybook
```
## Props
- **baseColor**: `[color]`
- Background color of the clock face.
- **borderColor**: `[color]`
- Color of the border.
- **borderWidth**: `[integer]`
- Width of the border. _0 will hide the border._
- **centerColor**: `[color]`
- Color of the center dot.
- **handColors**: `[object]`
- Color of each hand.
- **hour**: `[color]`
- Color ogf the hour hand.
- **minute**: `[color]`
- Color of the minute hand.
- **second**: `[color]`
- Color of the second hand.
- **notchColor**: `[color]`
- Color of the minute notches.
- **numberColor**: `[color]`
- Color of the hour numbers. (if enabled)
- **showNumbers**: `[boolean]`
- Toggle the hour numbers.
- **size**: `[integer]`
- Size of the clock face in pixels.
> `color` type defined by [extra-prop-types](https://github.com/brendon1555/extra-prop-type)
---
## Contributing
> To get started...
### Step 1
- **Option 1**
- 🍴 Fork this repo!
- **Option 2**
- 👯 Clone this repo to your local machine using `https://github.com/brendon1555/react-analogue-clock.git`
### Step 2
- **HACK AWAY!** 🔨🔨🔨
### Step 3
- 🔃 Create a new pull request using `https://github.com/brendon1555/react-analogue-clock/compare/`.
---
## Contributors
| **Brendon Lees** |
| :-----------------------------------------------------------------------------------------------------: |
| [](https://brendon1555.com) |
| `github.com/brendon1555` |
---
## Support
Reach out to me at one of the following places!
- Website at `brendon1555.com`
- Twitter at `@brendon1555`
---
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**
- Copyright 2020 © Brendon Lees.