Count Timer - NPM Package

A versatile counter package that can count both up and down with configurable start/stop values. Supports both JavaScript and TypeScript projects, including React applications.

Features

• Count up or down with configurable start/stop values
• Customizable update interval
• Event callbacks for updates and completion
• Pause/resume functionality
• TypeScript support with type definitions
• React hooks support

Installation

npm install count-timer
# or
yarn add count-timer

Basic Usage

JavaScript

const { Counter } = require('count-timer');

// Count up from 0 to 10
const counter = new Counter({
  direction: 'up',
  start: 0,
  end: 10,
  interval: 1000,
  onUpdate: (current) => console.log(`Current count: ${current}`),
  onComplete: () => console.log('Count complete!')
});

counter.start();

TypeScript

import Counter from 'count-timer';

const counter = new Counter({
  direction: 'down',
  start: 100,
  end: 90,
  interval: 500,
  onUpdate: (current: number) => {
    console.log(`Counting down: ${current}`);
  }
});

counter.start();

React Usage

Functional Component Example

import React, { useState, useEffect } from 'react';
import { Counter } from 'count-timer';

function App() {
  const [count, setCount] = useState(0);
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    const counter = new Counter({
      direction: 'up',
      start: 0,
      end: 10,
      interval: 1000,
      onUpdate: setCount,
      onComplete: () => setStatus('completed')
    });

    return () => counter.pause();
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <p>Status: {status}</p>
    </div>
  );
}

Custom Hook Example

// useCounter.ts
import { useState, useEffect } from 'react';
import { Counter, CountOptions } from 'count-timer';

export function useCounter(options: CountOptions) {
  const [count, setCount] = useState(options.start || 0);
  
  useEffect(() => {
    const counter = new Counter({
      ...options,
      onUpdate: (current) => {
        setCount(current);
        options.onUpdate?.(current);
      }
    });

    return () => counter.pause();
  }, [options.direction, options.start, options.end, options.interval]);

  return count;
}

// App.tsx
import { useCounter } from './useCounter';

function App() {
  const count = useCounter({
    direction: 'up',
    start: 0,
    end: 10,
    interval: 1000
  });

  return <h1>Count: {count}</h1>;
}

API Reference

Counter Class

Constructor Options

| Option | Type | Default | Description | |-------------|------------|------------|-------------| | direction | 'up'|'down' | 'up' | Counting direction | | start | number | 0 | Starting value | | end | number | Infinity (up) or -Infinity (down) | Ending value | | interval | number | 1000 | Interval between updates in ms | | onUpdate | function | undefined | Callback when count updates | | onComplete | function | undefined | Callback when count completes |

Methods

| Method | Description | |-----------|-------------| | start() | Start counting | | pause() | Pause counting | | reset() | Reset to start value | | getCurrent() | Get current count | | getStatus() | Get current status ('idle', 'running', 'paused', 'completed') |

Examples

Countdown Timer

const countdown = new Counter({
  direction: 'down',
  start: 60,
  end: 0,
  interval: 1000,
  onUpdate: (current) => {
    console.log(`${current} seconds remaining`);
  },
  onComplete: () => {
    console.log('Time is up!');
  }
});

countdown.start();

Infinite Counter

const infiniteCounter = new Counter({
  direction: 'up',
  start: 0,
  interval: 500,
  onUpdate: console.log
});

infiniteCounter.start();
// Will count indefinitely

Development

To contribute or build locally:

1. Clone the repository
2. Install dependencies: npm install
3. Build: npm run build
4. Test: npm test

License

MIT