2.0.7 • Published 6 years ago

react-countdown-custom-labels v2.0.7

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

react-simple-countdown

A simple countdown component with React 16. This component is based on the react-simple-countdown created by Leonidas Esteban. https://www.npmjs.com/package/react-simple-countdown

install

npm install react-countdown-custom-labels --save

How to use

import component:

import CountDown from 'react-countdown-custom-labels';

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-countdown-custom-labels';

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>
2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago