Ninety-nine Pitchers of Malt

    @chhxin/countdown
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    useCountDown · npm

    GitHub issues GitHub license

    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

    Edit @chhxin/countdown 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 化风

    Install

    npm i @chhxin/countdown

    DownloadsWeekly Downloads

    17

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    6.62 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar