react-timeframe

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

Installing

yarn add react-timeframe

OR

npm install react-timeframe --save

Basic Usage

import Timeframe from 'react-timeframe';

<Timeframe
  targetDate={1540349389582}
  />

<Timeframe
  targetDate={"2017-05-12T08:00:00Z"}
  />

Props

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.

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

<Timeframe
    urgency={30000}

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

Dependencies

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

License

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