Logo

0x3d.Site

is designed for aggregating information.
Welcome
check repository here

⏱️ use-timer

npm Version License Linux Build Status Bundle size Bundle size

Simple timer turned into React Hooks. Read about Hooks feature.

Installation

npm i use-timer

With Yarn:

yarn add use-timer

Demo

Netlify Status

🚀 Try last production version on Netlify!

https://use-timer.netlify.app/

Usage

Basic timer

import React from 'react';
import { useTimer } from 'use-timer';

const App = () => {
  const { time, start, pause, reset, status } = useTimer();

  return (
    <>
      <div>
        <button onClick={start}>Start</button>
        <button onClick={pause}>Pause</button>
        <button onClick={reset}>Reset</button>
      </div>
      <p>Elapsed time: {time}</p>
      {status === 'RUNNING' && <p>Running...</p>}
    </>
  );
};

Decremental timer

const { time, start, pause, reset, status } = useTimer({
  initialTime: 100,
  timerType: 'DECREMENTAL',
});

Timer with end time

const { time, start, pause, reset, status } = useTimer({
  endTime: 30,
  initialTime: 10,
});

Advance time

This works for all types of timer (incremental and decremental).

const { time, start, advanceTime } = useTimer({
  initialTime: 20,
});

start();
advanceTime(10);

console.log(time); // 30

Callbacks

Some callback functions can be provided.

When time is over

const { time, start, pause, reset, status } = useTimer({
  endTime,
  onTimeOver: () => {
    console.log('Time is over');
  },
});

When time is updated

const { time, start, pause, reset, status } = useTimer({
  endTime,
  onTimeUpdate: (time) => {
    console.log('Time is updated', time);
  },
});

Configuration

The configuration and all its parameters are optional.

PropertyTypeDefault valueDescription
autostartbooleanfalsePass true to start timer automatically
endTimenumbernullThe value for which timer stops
initialStatusstring"STOPPED"The initial status for the timer. Options are: "RUNNING", "PAUSED", and "STOPPED"
initialTimenumber0The starting value for the timer
intervalnumber1000The interval in milliseconds
onTimeOverfunctionCallback function that is called when time is over
onTimeUpdatefunctionCallback function that is called when time is updated
stepnumber1The value to add to each increment / decrement
timerTypestring"INCREMENTAL"The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL")
React
React
React is a JavaScript library for building user interfaces. It enables developers to create reusable components and manage complex application states efficiently. React is widely adopted for developing dynamic and responsive web applications.
React Community – React
React Community – React
Patterns.dev
Patterns.dev
React
React
Quick Start – React
Quick Start – React
Snack - React Native in the browser
Snack - React Native in the browser
React JavaScript Tutorial in Visual Studio Code
React JavaScript Tutorial in Visual Studio Code
Overview · React Native
Overview · React Native
React Native · Learn once, write anywhere
React Native · Learn once, write anywhere
React Conferences – React
React Conferences – React
React - CodeSandbox
React - CodeSandbox
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS
GitHub - PaulLeCam/react-leaflet: React components for Leaflet maps
GitHub - PaulLeCam/react-leaflet: React components for Leaflet maps
GitHub - measuredco/puck: The visual editor for React
GitHub - measuredco/puck: The visual editor for React
GitHub - mkosir/react-parallax-tilt: 👀  Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
GitHub - mkosir/react-parallax-tilt: 👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
GitHub - cypress-io/cypress: Fast, easy and reliable testing for anything that runs in a browser.
GitHub - cypress-io/cypress: Fast, easy and reliable testing for anything that runs in a browser.
GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js
GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js
GitHub - dvtng/react-loading-skeleton: Create skeleton screens that automatically adapt to your app!
GitHub - dvtng/react-loading-skeleton: Create skeleton screens that automatically adapt to your app!
GitHub - framer/motion: Open source, production-ready animation and gesture library for React
GitHub - framer/motion: Open source, production-ready animation and gesture library for React
GitHub - gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨
GitHub - gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨
GitHub - FormidableLabs/victory: A collection of composable React components for building interactive data visualizations
GitHub - FormidableLabs/victory: A collection of composable React components for building interactive data visualizations
TW Elements integration with React - Free Examples & Tutorial
TW Elements integration with React - Free Examples & Tutorial
GitHub - TanStack/router: 🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
GitHub - TanStack/router: 🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
GitHub - remotion-dev/remotion: 🎥      Make videos programmatically with React
GitHub - remotion-dev/remotion: 🎥 Make videos programmatically with React
GitHub - rcbyr/keen-slider: The HTML touch slider carousel with the most native feeling you will get.
GitHub - rcbyr/keen-slider: The HTML touch slider carousel with the most native feeling you will get.
GitHub - reduxjs/redux: A JS library for predictable global state management
GitHub - reduxjs/redux: A JS library for predictable global state management
GitHub - bvaughn/react-error-boundary: Simple reusable React error boundary component
GitHub - bvaughn/react-error-boundary: Simple reusable React error boundary component
GitHub - remix-run/react-router: Declarative routing for React
GitHub - remix-run/react-router: Declarative routing for React
GitHub - gaearon/overreacted.io: Personal blog by Dan Abramov.
GitHub - gaearon/overreacted.io: Personal blog by Dan Abramov.
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
GitHub - vercel/swr: React Hooks for Data Fetching
GitHub - vercel/swr: React Hooks for Data Fetching
React
More on React

Programming Tips & Tricks

Code smarter, not harder—insider tips and tricks for developers.

Error Solutions

Turn frustration into progress—fix errors faster than ever.

Shortcuts

The art of speed—shortcuts to supercharge your workflow.
  1. Collections 😎
  2. Frequently Asked Question's 🤯

Tools

available to use.

Made with ❤️

to provide resources in various ares.