react-use-timer is a hook to help you with timers in React.
To install run the following command in your project's folder if you are using yarn
yarn add @gabrielyotoo/react-use-timer
or if you are using npm
npm install @gabrielyotoo/react-use-timer
A simple timer example showing the current time from 10 to 0.
import { useTimer } from '@gabrielyotoo/react-use-timer';
function App() {
const [finished, setFinished] = useState(false);
const { currentTime, isRunning, start, pause } = useTimer(10, {
onFinish: () => {
setFinished(true);
},
onStart: () => {
setFinished(false);
},
});
return (
<>
{finished ? <p>Finished!</p> : null}
<div>
{!isRunning ? (
<p>Not running! Timer at {currentTime}</p>
) : (
<p>Timer at {currentTime}</p>
)}
<button onClick={start}>{!isRunning ? 'Start!' : 'Reset'}</button>
{isRunning ? <button onClick={pause}>Pause</button> : null}
</div>
</>
);
}
You can also run the example project.
Name | Type | Description |
---|---|---|
useTimer(time: number, options?: UseTimerOptions): UseTimerReturn | function | Create timer with specified time |
Name | Type | Optional | Description |
---|---|---|---|
time | number | false | The amount of ticks to run |
options | UseTimerOptions | true | The configuration for the timer |
Name | Type | Description |
---|---|---|
currentTime | number | The current time of the timer |
start(): void | function | The function to start the timer |
isRunning | boolean | If the timer is running or not |
pause(): void | function | The function to pause the timer |
Name | Type | Optional | Description |
---|---|---|---|
autoStart | boolean | true | If the timer should start in the first render |
interval | number | true | The interval in milliseconds between ticks |
onStart(): void | function | true | The function to be called when the timer starts |
onFinish(): void | function | true | The function to be called after the time's up |
Please, feel free to create issues and to open PRs. Be cautious to the tests and builds, because if your version doesn't pass they, your PR won't be approved and merged