Countdown timer for React and React-Native

Usage no npm install needed!

<script type="module">
  import reactTimeframe from '';



React-Timeframe is a React Component for use with both React && React Native.


yarn add react-timeframe


npm install react-timeframe --save

Basic Usage

import Timeframe from 'react-timeframe';


Prop Type Default Required Description
targetDate String/Number n/a True A date string ("2017-05-12T08:00:00Z") or timestamp (1540349389582)
stopAfterCountdown Boolean false False Whether the timer will stop once the target date is reached
urgency Number 60000 False Number of seconds before target reached that the state is set to urgent
dateFormat String 'MMMM Do YYYY' False What format to display date in. from date-fns/format Link
distanceOptions Object { includeSeconds: true, addSuffix: true } False Display options for distanceInWordsToNow function from date-fns Link
onRender Function onRender False If < 2 days ago : Returns string with distance between the given date and now in words. If > 2 days ago returns string formatted to the dateFormat prop.
onUpdate Function onRender False

Advanced Usage

Different Render value for completed timeframes.

  onRender={function(state, props, self) {
    let val;

    if (state.complete) {
      val = 'Completed';
    } else {
      val = yourOwnCustomFunctionToHandleDisplayOfRemainingTime(state.timeRemaining)

    return val;

Urgency state property

A threshold prop (in milliseconds) can be used that when crossed will set a state of urgent: true This can be used to add a different classname, or ReactNative styles, or whatever else you feel like. Default: 60000


    onRender={function() {
        if (this.state.urgent) { console.log('urgent') }


  • React
  • prop-types
  • date-fns
  • react-mixin
  • react-timer-mixin


This project is licensed under the MIT License - see the file for details