react-countdown-component

    0.1.3 • Public • Published

    React Countdown Component

    Description

    Tiny, easy and customizable component providing you with an updated counter of hours, minutes, seconds and/or milliseconds –one, some or all of them– or just the total count of milliseconds remaining for a given lapse of time –in ms.

    The updated counter may be displayed in your apps with any tags, styles or any customization you need to show it.

    Demo

    You can dive into the example or review the code in the GitHub repo.

    react-countdown-component demo

    Requirements

    Node >= 6.x
    React >= 16
    React's Prop-Types >= 16
    

    Install

    npm install --save react prop-types
    npm install --save react-countdown-component
    

    Usage

    You can use this counter in various ways. Check the demo directory in the repo for an in-depth example. This is one of the simplest implementation:

    import CountDown, {CountdownContext} from 'react-countdown-component';
     
    render() {
      const { hours, minutes, seconds } = this.state.counter;
      return (
        <CountDown
          // Your state to hold counter's data.
          from     = { this.state.counter }
          // Triggered on each counter's update.
          onUpdate = { value => this.onUpdate( value ) }
        >
        <CountdownContext.Consumer>
          { ( counter ) => (
            <React.Fragment>
              // Use the countdown however you want, like this:
              <h2>{ hours }:{ minutes }:{ seconds }</h2>
     
              // You may use this toggler button to play/pause the counter and
              // also standalone controls to play, pause and/or reset.
              <button onClick = { counter.playPause } >Play/Pause Countdown</button>
            </React.Fragment>
          ) }
        </CountdownContext.Consumer>
        </CountDown>
      )
    }

    Props

    These are the properties you may pass to the CountDown component:

    property propType required default description
    from object yes null Requires an object (see example).
    updateEvery number no 1000ms Milliseconds between updates.
    leftPadding string no '0' Number of zeroes on the left.
    onStart function no null Callback on start.
    onPause function no null Callback on pause.
    onReset function no null Callback on reset.
    onUpdate function yes null Callback on update.
    onFinish function no null Callback on finish.

    RenderProps

    These are the functions you can use to manipulate the generated counter (see example):

    property propType required default description
    start function yes* null Starts the countdown.
    pause function no null Pauses the counter.
    reset function no null Stops the counter and resets it.
    playPause function yes* null Toggles between play and pause.

    License

    MIT

    Author

    Yago Estévez

    Install

    npm i react-countdown-component

    DownloadsWeekly Downloads

    8

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    89.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • yagoestevez