react-countdown-component-hooks
v1.0.5
Published
useCountdown is a custom React hook designed to create countdown timers based on a specified date.
Downloads
33
Maintainers
Readme
Table of Contents
useCountdown React Hook
useCountdown
is a custom React hook designed to create countdown timers based on a specified date.
Installation
You can install react-countdown-component-hooks using npm or yarn:
Install dev dependencies
npm i react-countdown-component-hooks
# or
yarn add react-countdown-component-hooks
Usage
- Example -1
import { useCountdown } from 'react-countdown-component-hooks'
function App() {
const expiresAt = new Date().getTime() + 1000 * 60 * 60 * 24 * 7
const { remainingTime } = useCountdown(expiresAt)
return (
<div>
{remainingTime}
</div>
)
}
export default App
- Example -2
import { useCountdown } from 'react-countdown-component-hooks'
function App() {
const expiresAt = new Date().getTime() + 1000 * 60 * 60 * 24 * 7
const { days, hours, minutes, remainingTime, seconds } = useCountdown(expiresAt)
return (
<div>
<p>Time Remaining: {remainingTime}</p>
<p>Days: {days}, Hours: {hours}, Minutes: {minutes}, Seconds: {seconds}</p>
</div>
)
}
export default App
Parameters
- date (string | number | Date): The target date for the countdown timer.
Return Values
- days (number): The number of days remaining.
- hours (number): The number of hours remaining.
- minutes (number): The number of minutes remaining.
- seconds (number): The number of seconds remaining.
- remainingTime (string): The remaining time in the format "DD:HH:MM:SS".
License
This project is licensed under the MIT License - see the LICENSE file for details.
Author
Email: [email protected]
Protfolio: https://dev-shohan.netlify.app/
https://github.com/abdulkadershohan