2020-10-09 18:03:01 +07:00
|
|
|
# React Countdown Hook
|
2020-08-28 15:58:25 +07:00
|
|
|
|
2021-03-10 18:02:12 +07:00
|
|
|
[![Build Status](https://dci.osa.cubetiqs.com/api/badges/CUBETIQ/react-use-countdown/status.svg)](https://dci.osa.cubetiqs.com/CUBETIQ/react-use-countdown)
|
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
### Installation
|
|
|
|
```shell script
|
|
|
|
# NPM
|
|
|
|
npm i @cubetiq/react-use-countdown
|
2020-08-28 15:58:25 +07:00
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
# Yarn
|
|
|
|
yarn add @cubetiq/react-use-countdown
|
|
|
|
```
|
2020-08-28 15:58:25 +07:00
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
### Example
|
|
|
|
```js
|
|
|
|
import React from 'react';
|
|
|
|
import ReactDOM from 'react-dom';
|
2020-10-09 18:08:22 +07:00
|
|
|
// import the countdown hook here
|
2020-10-09 18:03:01 +07:00
|
|
|
import { useCountdown } from 'cubetiq-react-use-countdown';
|
2020-08-28 15:58:25 +07:00
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
const App = () => {
|
2020-10-09 18:08:22 +07:00
|
|
|
const { timeleft, start } = useCountdown({
|
|
|
|
step: 1000,
|
|
|
|
});
|
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
return (
|
|
|
|
<div>
|
2020-10-09 18:08:22 +07:00
|
|
|
<button onClick={() => start(10000)}>Start Countdown</button>
|
2020-10-09 18:03:01 +07:00
|
|
|
<h1>Time left: {timeleft}</h1>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2020-08-28 16:26:06 +07:00
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
ReactDOM.render(<App />, document.querySelector('#root'));
|
|
|
|
```
|
2020-08-28 16:26:06 +07:00
|
|
|
|
2020-10-09 18:03:01 +07:00
|
|
|
### Contributors
|
2020-10-09 18:08:22 +07:00
|
|
|
Project's repository: [React Countdown](https://git.cubetiqs.com/CUBETIQ/react-use-countdown.git)
|
2020-10-09 18:03:01 +07:00
|
|
|
- [@s.long](https://git.cubetiqs.com/s.long)
|
2020-10-09 18:08:22 +07:00
|
|
|
- [@sombochea](https://git.cubetiqs.com/sombochea)
|
|
|
|
- [@cubetiq](https://git.cubetiqs.com/CUBETIQ)
|