Introduction

:rocket: a cute clock components with ReactJS

screenshot

Try to move the mouse to the face.

if you set display.type = 'clock' && set display.language = 'zh' or 'en'

if you set display.type = 'text' && set display.info = 'Itagn'

if you want a scrolling clock, and you should set display.type = 'scroll'

if you want to change the expression, and you should set display.emoji = 'angry' or 'jiong'

let the cute clock wears glasses, and you should set display.glasses = true

if you set display is invalid

Install

//  by npm
$ npm install react-iclock --save
//  by cnpm
$ cnpm install react-iclock --save
//  by yarn
$ yarn add react-iclock --save

Usage

import React, { Component } from 'react';
import './App.css';
import { Iclock } from 'react-iclock';
var dis = {
    type: 'clock',
    className: '.clock',
    emoji: 'smile',
    hoverAnimation: true,
    glasses: false
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <Iclock className="clock" display={dis}/>
      </div>
    );
  }
}

export default App;

Api

• display

In order to judge display clock or text by setting display

Type: Object
Default: {
    type: 'clock',  //  value: 'clock' || 'text' || 'scroll'
    info: 'o w o',  //  if this.type is 'text', and show this.info
    className: '',  //  set className when more than one iclock component on the page
    scale: 1,  //  Magnification
    emoji: 'smile',  //  value: 'smile' || 'angry' || 'jiong'
    glasses: false,  //  Choose whether to wear glasses
    hoverAnimation: fasle,  //  Choose whether to open animation of clock
    language: 'en',  //  language
    dateColor: '#999',  //  set date-color
    fontColor: 'orange',  //  set font-color
    fontSize: '1.5rem',  //  set font-size
    fontStyle: 'Helvetica,"Microsoft YaHei"' // set font-family
}

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT © itagn
作者：微博 @itagn - Github @itagn