项目作者: xendora

项目描述 :
A minimalistic yet customizable timer component!
高级语言: JavaScript
项目地址: git://github.com/xendora/react-timer.git
创建时间: 2019-08-28T17:57:53Z
项目社区:https://github.com/xendora/react-timer

开源协议:MIT License

下载


react-timer

A minimalistic yet customizable timer component!

Live demo

Travis (.org) branch GitHub Release Date @xendora/react-timer?style=for-the-badge" alt="npm"> @xendora/react-timer?style=for-the-badge" alt="NPM">
@xendora/react-timer?style=for-the-badge" alt="npm bundle size"> @xendora/react-timer?style=for-the-badge" alt="npm bundle size">

Basic Timer with 100ms interval

Installation

For NPM

  1. npm install @xendora/react-timer

For Yarn

  1. yarn add @xendora/react-timer

Usage

  1. import ReactTimer from "@xendora/react-timer";
  2. // Incremental counter
  3. <ReactTimer
  4. interval={100}
  5. start={0}
  6. end={t => t === 100}
  7. onTick={t => t + 1}
  8. >
  9. {time => <span>{time}</span>}
  10. </ReactTimer>
  11. // Decremetal counter
  12. <ReactTimer
  13. interval={100}
  14. start={100}
  15. end={t => t === 0}
  16. onTick={t => t - 1}
  17. >
  18. {time => <span>{time}</span>}
  19. </ReactTimer>
  20. // Infinite counter
  21. <ReactTimer
  22. interval={100}
  23. start={0}
  24. end={t => false}
  25. onTick={t => t + 1}
  26. >
  27. {time => <span>{time}</span>}
  28. </ReactTimer>

Props

Name Type Description
children object (required) Define your react component here
start number (required) A start value for the timer
end function (required) A function which determines the end for the timer
interval number An interval value for the timer. Default is 1 second
onTick function (required) A callback function where the next computed value is determined
onEnd function A callback function which executes when the timer stops executing

License

MIT © xendora