use-date-range-navigation

Hook for managing a date range with various preset options (e.g., weekly, monthly, quarterly) and manual mode. It provides functions to change the date range based on the selected type and to navigate to the previous or next period.

Installation

npm install use-date-range-navigation
# or
pnpm add use-date-range-navigation

Usage

import { useDateRangeNavigation } from 'use-date-range-navigation'

function MyComponent() {
  const { start, end, type, change, prev, next } = useDateRangeNavigation({
    type: 'monthly',
    start: new Date(),
    end: new Date(),
  })

  return (
    <div>
      <button onClick={() => prev()}>Previous</button>
      <button onClick={() => next()}>Next</button>
      <button onClick={() => change({ type: 'weekly' })}>Weekly View</button>
      
      <p>Period: {type}</p>
      <p>Start: {start.toISOString()}</p>
      <p>End: {end.toISOString()}</p>
    </div>
  )
}

API

useDateRangeNavigation(options)

Returns a date range manager with navigation functions.

Options

• type - Period type: 'manual' | 'weekly' | 'monthly' | 'quarterly' | 'bimonthly' | 'semiannually' | 'yearly' | 'biennially' | ...
• start - Initial start date (optional, defaults to today)
• end - Initial end date (optional, defaults to today)
• startOfWeek - Day considered start of week (0-6, default: 1 for Monday)
• monthStartOfYear - Month considered start of year (1-12, default: 1 for January)

Returns

{
  type: string
  start: Date
  end: Date
  change: (options: UseDateRangeNavigationChangeOptions) => void
  prev: () => void
  next: () => void
}

License

MIT