1.2.1 • Published 8 years ago

react-simple-countdown v1.2.1

Weekly downloads
45
License
MIT
Repository
github
Last release
8 years ago

react-simple-countdown

A simple countdown component with React <3

install

npm install react-simple-countdown --save

How to use

import component:

import CountDown from 'react-simple-countdown';

Props

date

A string width valid date like isoformat or js dates

className

Custom component class

##Example

import React from 'react';
import { render } from 'react-dom';
import CountDown from 'react-simple-countdown';

function finish() {
  console.log('Countdown finished');
}

function MyComponent() {
  // i18n or custom messages
  const messages = {
    days: {
      plural: 'Days',
      singular: 'Day',
    },
    hours: 'Hours',
    mins: 'Min',
    segs: 'Seg',
  }
  return (
    <CountDown
      date="2015-09-12T00:00:00+00:00"
      className="MyCoundown"
      {...messages}
      onEnd={finish}
    />
  );
}

render(<MyComponent/>, document.body);

Custom classNames

Rendered html output for prop className="MyCountdown"

<div className="MyCountdown">
  <div class="MyCountdown-col is-day">
    <p><strong>01</strong><span>Days</span></p>
  </div>

  <div class="MyCountdown-col is-hour">
    <p><strong>00</strong><span>Hours</span></p>
  </div>
  <div class="MyCountdown-col is-min">
    <p><strong>00</strong><span>Mins</span></p>
  </div>
  <div class="MyCountdown-col is-seg">
    <p><strong>10</strong><span>Seg</span></p>
  </div>
</div>
1.2.1

8 years ago

1.2.0

8 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.9

9 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago