Skip to content

shu20031026/react-hooks-time-limit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-hooks-time-limit

npm

React Hook for get seconds to the target time

Instrallation

You can install the package from npm.

$ npm install react-hooks-time-limit

or

$ yarn add react-hooks-time-limit

Usage

This is the simplest example.

import React from "react";
import { useTimeLimit } from "react-hooks-time-limit";

const getTomorrow = (): Date => {
  const date = new Date(Date.now());
  date.setDate(date.getDate() + 1);
  return date;
}

const Component: React.FC = () => {
  const tomorrow = getTomorrow();
  const [ timeLeft, setTargetTime ] = useTimeLimit(tomorrow, { isSec: true });

  const handleChangeDate = (event: React.ChangeEvent<HTMLInputElement>) => {
    const date = new Date(event.target.value)
    setTargetTime(date)
  }

  return (
    <div>
      <h2>{timeLeft} seconds left until the target time</h2>
      <p>change target time</p>
      <input type="date" onChange={handleChangeDate}/>
    </div>
  );
};
Parameter Default Type Description
intervalTime 1000 int Time interval to update the remaining time (optional)
isSec false boolean Returns seconds if true, ms if false (optional)

License

MIT © shu20031026