jeka1985/flip-timer

80-s flip clocks like react countdown

react-flip-counter

React countdown timer, like an 80-s flip clocks May be useful for stuff like promos, sales, launch landings and so on.

https://jeka1985.github.io/

Install

npm i --save react-flip-counter

Webpack configuation

As react-flip-counter contains JSX syntax and has CSS resources, it must be parsed with babel and CSS loader.

You may have a list of such UI modules, so it might be useful create array with such types of modules names and use it as loader includes with main src folder

var uiModules = ['react-flip-counter'],
    includes = uiModules.reduce((res, name) => {
      res.push(path.resolve(root, 'node_modules/' + name));

      return res;
    }, [path.resolve(root, 'src/')]);

Then you need to update loaders configuration and use include instead exclude property

rules: [
  {
    test: /\.js$/,
    include: includes,
    use: {
      loader: 'babel',
      ...
    }
  },
  {
    test: /\.css$/,
    include: includes,
    use: {
      loader: 'css',
      ...
    }
  }
  ...
]

Usage

  <Counter
    onStop={() => alert('stopped')}
    stop={new Date('Wed Nov 15 2017 15:57:38 GMT+0300 (MSK)')}/>

Props

• onStop Function to be called on time over

• stop Time when counter shod stop and show all zeros. expect Date

flip-timer's Issues

Cannot read property 'indexOf' of undefined

报错信息：

Uncaught TypeError: Cannot read property 'indexOf' of undefined

源码在这里：

getDitits() {

    console.log(this.props.show);

    return Object.keys(this.state.diff).filter(key => {
      return this.props.show.indexOf(key) >= 0;
    })
  }

@jeka1985 请问这里的show参数具体代表什么

Failed to compile

Hi,
Looks like a really great component and I would love to use it, but when I run
Yarn add react-flip-timer
and import it in my react site like this
import Countdown from 'react-flip-counter'

And use it as a component in my jsx
<Countdown stop={new Date("Mon Nov 30 2020 00:00:00 GMT+0300 (MSK)")}/>

I get the following error in the browser:

Failed to compile:
launch/node_modules/react-flip-counter/src/Countdown/index.js Unexpected token (82:11)
You may need an appropriate loader to handle this file type.
| };
|
| return <div className={cn(st.countdown, this.props.className)}>
| {Object.keys(this.state.diff).map(key => <div
| key={key}

Am I missing something?
Thank you in advance
Steffen

why the demo code differen form the demo

your demo on https://jeka1985.github.io/ was countdown, but the code i clone form your git is increasing timer ... I'm so confusing,how can i make the code as your demo?

BTW your demo is excellent