Clock

The Clock component brings the time to your ReactJS app using SVG.
It's supported by all newer browsers.

By default, this component looks like this:

It can be achieved with the following code:

import React from 'react'
import { render } from 'react-dom'
import { Clock } from 'rsg-components'

render(<Clock />, document.getElementById("root"));

The clock component is firstly available in version 3.0.0-beta.1 where RSG is removed from the components and you have to import just Clock instead of RSGClock

Check out this live demo

Props

Prop	Type	Default value	Description
standard props	not specified		all standard React props for a *div or span: http://goo.gl/SSrsHn
size	number (positive number bigger than 20)	200	Change the SVG sizes and proportions
seconds	boolean	false	If the size prop IS SMALLER than 95 use this to specify whether to show seconds.

*The main SVG is placed in a div but if you set too small size, the clock won't be displayed as SVG, that's why standard props are for div OR span.

The prop size:

If the prop's value is between 20 and 95 the clock is show as text with font size: size / 2.5;
If the value of size is bigger than 95 it's shown as SVG. View how the sizes are calculated;

Examples

Code	Screenshot	Notes
<Clock />		The default component Clock
<Clock size={50} />
<Clock size={75} seconds={true} />		seconds enabled
<Clock size={100} />		Resizable clock to fit anywhere