apeman-react-clock

apeman react package for clock components.

Usage no npm install needed!

<script type="module">
  import apemanReactClock from 'https://cdn.skypack.dev/apeman-react-clock';
</script>

README

apeman-react-clock

Build Status Code Climate Code Coverage npm Version JS Standard

apeman react package for clock components.

Installation

$ npm install apeman-react-clock --save

Demo

Live demo is hosted on GitHub Pages.

Demo Image

Usage

'use strict'

import React from 'react'
import {ApAnalogClock, ApAnalogClockStyle} from 'apeman-react-clock'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <ApAnalogClockStyle scoped />
        <ApAnalogClock />
      </div>
    )
  }
})

Components

ApAnalogClockHand

Props

Name Type Default Description
angle number 0
width number 24
heightRate number 1

ApAnalogClockLetter

Props

Name Type Default Description
angle number 0
letter string ''

ApAnalogClockStyle

Props

Name Type Default Description
style object {}
width number 320
height number 240
color string '#333'
accentColor string '#F33'
backgroundColor string '#FFF'

ApAnalogClock

Props

Name Type Default Description
boardLetters array '12,1,2,3,4,5,6,7,8,9,10,11'.split(',')

ApClockStyle

Props

Name Type Default Description
style object {}

ApClock

Props

Name Type Default Description

ApDigitalClockMainDisplay

Props

Name Type Default Description
hours string
minutes string
seconds string
fontSize number
onSizeChange func

ApDigitalClockStyle

Props

Name Type Default Description
style object {}
width number 340
height number 240
color string '#333'
backgroundColor string '#FFF'

ApDigitalClockSubDisplay

Props

Name Type Default Description
day string
fontSize number
width number

ApDigitalClock

Props

Name Type Default Description
showSeconds bool true

License

This software is released under the MIT License.

Links