React Analogue Clock (Plus a custom Prop Type)

Wed, 18 Mar 2020 10:29:31 GMT

For the last week or so I’ve been working on a React component as a bit of fun in my free time. I used it as an excuse to give typescript a shot and I’ve got to say; It’s not bad!

react-analogue-clock (npm) is what I came up with. It’s a fairly simple React component that displays the current time live on a customisable analogue clock face.

While working on the clock face, I determined that I also needed a custom Prop Type for the color values passed to the component. It didn’t make much sense to me for the prop types to allow any string to be accepted when only valid color values will work, so I also made an extra-prop-types (npm) library for this with color as the first custom prop type.

Heres a quick snippet of the component in use

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
}

<AnalogueClock {...clockOptions} />

Overall this was a pretty fun and useful way for me to start learning Typescript and I plan on adding to and improving both the react-analogue-clock and extra-prop-types projects into the future.

👉 Check out the live demo here: https://brendon1555.github.io/react-analogue-clock/

My Github Action for the Linode cli

Fri, 06 Mar 2020 09:36:20 GMT

GitHub Hackathon

Today I entered the Github Actions Hackathon. What better way to kick off the blog!

Github is currently hosting a four-week hackathon for the community to submit original GitHub Actions. As a bonus, the first 1,000 submissions receive free GitHub swag! I decided to have a go and made an action to allow access to the Linode cli within a GitHub workflow.

You can find the project here: https://github.com/brendon1555/setup-linode-cli

This is my first time creating something opensource from scratch. I have previously contributed to a few opensource projects for last year’s Hacktoberfest but nothing too serious. This isn’t all that much either but its a start.

I look forward to contributing more to opensource where and when I can.

Blog by Brendon Lees

React Analogue Clock (Plus a custom Prop Type)

Heres a quick snippet of the component in use

👉 Check out the live demo here: https://brendon1555.github.io/react-analogue-clock/

My Github Action for the Linode cli

GitHub Hackathon