react-clockwall
v1.4.7
Published
Digital Clocks made with ReactJS
Downloads
42
Maintainers
Readme
React-Clockwall
![Dependency Status](https://www.versioneye.com/user/projects/5702884dfcd19a00415b002b/badge.svg?style=flat)
Digital Clock made with React JS.
Features
- Customizable with CSS
- Built-in Internationalization (i18n)
- Light, Create as many clocks as you want
- Unit tested
- ES2015, Future-proof javascript
Browser Support :
- Chrome
- Safari
- FireFox
- IE Edge
- IE9, IE10, IE11 (partial FlexBox support)
Stack
- NodeJS : https://nodejs.org
- BabelJS : https://babeljs.io
- ReactJS : https://facebook.github.io/react/
Preview
A Demo of the Clock component is available in folder demo
.
Open demo/index.html
in your Browser. Or here : https://pixelfactory.io/projects/clockwall/
Build
Please note that any commands we tell you to run must be ran from the project's root folder.
Gulp task runner
Gulp is an Task / Build runner. This project relies on Gulp for automation of tasks.
In order to use Gulp you will need to have Node.js installed on your computer. Also insure that you have NPM installed. You can check if these are installed properly by opening up a Terminal (Linux or Mac) or Command Prompt (Windows) and entering the command: node --version
and npm --version
. These commands should output something similar to "v5.1.1" and "3.3.12" respectively.
Once you have installed these programs, you'll need to get gulp. You can achieve this by running the following command:
[email protected]> npm install -g gulp
Now you should be able to exectue the command gulp :
[email protected]> gulp --version
CLI version 3.9.0
Install dependencies
Clockwall dependencies are managed with NPM. The list of all dependencies can be found in the file package.json
.
You can install the dependencies simply by running the following command:
[email protected]> npm install
Build application
Once you have installed the dependencies using NPM you can build the project using the command :
[email protected]> npm run build
> [email protected] build /Dev/pixelfactory.io/clockwall
> gulp build
[16:47:27] Requiring external module babel-core/register
[16:47:29] Using gulpfile /Dev/pixelfactory.io/clockwall/gulpfile.babel.js
[16:47:29] Starting 'build'...
[16:47:29] Starting 'clean'...
[16:47:29] Finished 'clean' after 5.42 ms
[16:47:29] Starting 'browserify'...
[16:47:29] Finished 'browserify' after 36 ms
[16:47:29] Starting 'styles'...
[16:47:29] Finished 'styles' after 9.84 ms
[16:47:29] Starting 'htmlReplace'...
[16:47:29] Finished 'htmlReplace' after 3.13 ms
[16:47:29] Finished 'build' after 60 ms
This will create a new folder dist
with the following files :
.
├── index.html
├── js
│ ├── app.js
│ └── app.js.map
└── styles
├── main.css
├── main.css.map
├── reset.css
├── reset.css.map
├── theme.css
└── theme.css.map
2 directories, 9 files
Development Server
We've made it easy to develop and test on your local machine. Once you've installed the dependencies and built your project, you can start a local server by running the command npm run watch
. This will start a local server and open up your browser.
[email protected]> npm run watch
> [email protected] watch /Dev/pixelfactory.io/clockwall
> gulp watch
[23:10:13] Requiring external module babel-core/register
[23:10:20] Using gulpfile /Dev/pixelfactory.io/clockwall/gulpfile.babel.js
[23:10:20] Starting 'watch'...
[23:10:20] Starting 'clean'...
[23:10:20] Finished 'clean' after 34 ms
[23:10:20] Starting 'browserSync'...
[23:10:21] Finished 'browserSync' after 139 ms
[23:10:21] Starting 'watchTask'...
[23:10:21] Finished 'watchTask' after 13 ms
[23:10:21] Starting 'watchify'...
[23:10:21] Starting 'styles'...
[23:10:21] Finished 'styles' after 7.55 ms
[23:10:21] Starting 'lint'...
[23:10:21] Finished 'lint' after 170 ms
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://172.16.1.174:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://172.16.1.174:3001
-------------------------------------
[BS] Serving files from: ./
[BS] 4 files changed (main.css.map, main.css, reset.css.map, reset.css)
[BS] 1 file changed (app.js)
[23:10:26] Finished 'watchify' after 5.39 s
[23:10:26] Finished 'watch' after 5.58 s
The Development environment uses browserSync to enable LiveReload. Your browser will be automatically as you change HTML, CSS and Javascript files or other files under src
folder.
Running test
The project test can be found in the folder test/components
. You can run the tests by running the command: npm test
[email protected]> npm test
> [email protected] test /Dev/pixelfactory.io/clockwall
> mocha --reporter nyan --compilers js:babel/register --recursive
24 -_-_-_-_-_-_-_-_-_-_-_-_-_,------,
0 -_-_-_-_-_-_-_-_-_-_-_-_-_| /\_/\
0 -_-_-_-_-_-_-_-_-_-_-_-_-^|__( ^ .^)
-_-_-_-_-_-_-_-_-_-_-_-_- "" ""
24 passing (78ms)
Getting started
Basic Usage
Simply import Clock from './components/Clock';
and start using the component.
ReactDOM.render(
<div className="flex-container clockwall">
<Clock config={{ timezone: 'Europe/Paris', town: 'Paris'}} />
</div>
, document.getElementById('content')
);
Advanced Usage
Usage :
import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './components/Clock';
window.React = React;
var clocks = [
{ id: 'clock1', town: 'New York', timezone: 'America/New_York' },
{ id: 'clock2', town: 'الدار البيضاء', timezone: 'Africa/Casablanca', locale: 'fr' },
{ id: 'clock3', town: 'Paris', timezone: 'Europe/Paris', locale: 'fr' },
{ id: 'clock4', town: '香港', timezone: 'Asia/Hong_Kong', locale: 'zh-cn' },
{ id: 'clock5', town: 'नई दिल्ली', timezone: 'Asia/Kolkata', locale: 'hi' },
{ id: 'clock6', town: '東京', timezone: 'Asia/Tokyo', locale: 'ja' },
{ id: 'clock7', town: 'Αθήνα', timezone: 'Europe/Athens', locale: 'el'},
{ id: 'clock8', town: 'Москва', timezone: 'Europe/Moscow', locale: 'ru' },
{ id: 'clock9', town: 'Hà Nội', timezone: 'Asia/Bangkok', locale: 'vi' },
{ id: 'clock10', town: 'Sao Paulo', timezone: 'America/Sao_Paulo', locale: 'pt' },
];
ReactDOM.render(
<div className="flex-container clockwall">
{clocks.map(clock =>
<Clock key={clock.id} config={clock} />
)}
</div>
, document.getElementById('content')
);
Required params :
- config.timezone : ISO Timezone
- config.town : Town name to display
Defaults values :
- config.id : CSS
#id
(default:pixelfactory-town
) - config.locale : ISO language code (default:
en
) - config.showTown : Include TOWN name in rendered html (default:
true
) - config.showTimezone : Include TIMEZONE name in rendered html (default:
true
) - config.showDate : Include DATE in rendered html (default:
true
)
Clock Class Definition can be found in Components-Clock
Customize
The Clock component will generate the following HTML for each clock you create :
<div id="clock1" class="clock">
<h1 class="town">New York</h1>
<h2 class="timezone">America/New_York EST</h2>
<ul class="time">
<li class="hours">09</li>
<li class="points">:</li>
<li class="minutes">43</li>
<li class="seconds"><sup>57</sup></li>
</ul>
<h1 class="date">Monday 4 January 2016</h1>
</div>
Each html element has its own CSS class, to customize the look of the Clock you can simply override the CSS classes in the styles/theme.css
file.
For example to set minutes color to red just add :
#clock1 .minutes {
color: red;
}
Note that we are also using the Clock CSS #id
to target only one Clock.
CHANGELOG
- 1.0.0 : Initial start
- 1.0.0 : Project structure
- 1.1.0 : Clock components
- 1.1.1 : Using moment.js
- 1.1.1 : Unit Test
- 1.1.2 : Upgrade to React 0.14.3
- 1.1.2 : Upgrade Test Utils and React 0.14.5
- 1.1.3 : Adding more Tests
- 1.2.0 : Adding locales i18e
- 1.2.1 : Customize CSS
- 1.2.2 : Switch to FlexBox
- 1.3.0 : Toggle Town and Date display
- 1.4.0 : Config prop declaration
- 1.4.1 : Use moment-timezone
- 1.4.2 : Use ES6 Class
- 1.4.7 : Adding meridiem (FallingSnow Github PR: https://github.com/amine7536/react-clockwall/pull/2)