useCountDown ·

Introduction

When sending the verification code, you need to prevent the user from clicking frequently to send (usually waiting for one minute). At this time, the send button is disabled and the countdown still takes effect when the user refreshes or closes the current page.

Demo

Install

npm i --save @chhxin/countdown

or

yarn add @chhxin/countdown

Usage

1. useCountDown

import { useCountDown } from "@chhxin/countdown";

const Timer = () => {
  const [restTime, resetCountDown] = useCountDown("timer", {
    total: 60,
    lifeCycle: "session"
  });

  return null;
};

2. CountDownProvider

import { CountDownProvider } from "@chhxin/countdown";

const Timer = () => (
  <CountDownProvider
    id="timer"
    options={{
      total: 60,
      lifeCycle: "session"
    }}
  >
    {(restTime, resetCountDown) => null}
  </CountDownProvider>
);

Props

| name | type | required | default | | ------- | ------ | -------- | ----------------------------------- | | id | string | true | | | options | object | false | {total: 60, lifeCycle: 'session'} |

options:

| name | type | required | default | | --------- | --------------------- | -------- | --------- | | total | number | false | 60 | | lifeCycle | 'session' | 'always' | false | 'session' |

lifeCycle：

• 'session', sessionStorage. It only takes effect during the current page period. When the user closes the page or opens a new page, the countdown is invalid.
• 'always', localStorage. As long as the user does not clear the browser data, the countdown will always take effect.

Licence

MIT License

Copyright (c) 2020 化风