React Countdown HOC

It's a render props component, or FaCC(Function as Child Component).

know more details about render props Render Props – React

Use this Component

yarn add react-countdown-hoc to install the latest version

<Countdown intervalSecond={1} duration={60}>
  {(isCounting, restTime, startCount) => (
    <button disabled={isCounting} onClick={() => startCounting(startCount)}>
      {isCounting ? `${restTime}s` : 'done'}
    </button>
  )}
</Countdown>

Props

|Name|Type|Default|Description| |:--|:--:|:-----:|:----------| |intervalSecond|number|required|Interval delay in second| |duration|number|required|Count down time| |children|number|(isCounting: boolean, durationTime: number, startCount: () => void) => React.ReactNode|A React child for the countdown's state| |autoTrigger|boolean|undefined|When Component mounted, auto starting count| |detectChanges|string|undefined|A compare condition to rerender countdown |

children

You could put a button here but start counting, and display rest of time.

isCounting is a flag to tell you if countdown completed

durationTime tells you rest time for current countdown

startCount is a function, to start count

Contribute to this repo

To install dependencies

$ yarn

To build

$ yarn build

To run tests

$ yarn test

To run Storybook

$ yarn start