⏱️ Time Series Dropdown (React + TypeScript)

A production-ready, headless Time Series Dropdown component for React dashboards.

Designed for analytics, monitoring, admin panels, and reporting systems where users need to filter data by time (presets + custom ranges).

You control the data.
This component only handles selection & UX.

🚀 Features

• Preset time ranges (15m, 1h, 24h, 7d, etc.)
• Custom date & time range picker
• Fully controlled component
• Optional localStorage persistence
• Works with React state, Redux, Zustand
• Tailwind CSS friendly
• No API coupling, no chart dependency

📦 Installation

npm install @puneet/time-series-dropdown


### 1️⃣ Time Range Slice

```ts
// store/timeRangeSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit"

type PresetRange = {
  type: "preset"
  key: string
}

type CustomRange = {
  type: "custom"
  fromISO: string
  toISO: string
}

export type TimeRange = PresetRange | CustomRange

type TimeRangeState = {
  range: TimeRange
}

const initialState: TimeRangeState = {
  range: { type: "preset", key: "24h" }
}

const timeRangeSlice = createSlice({
  name: "timeRange",
  initialState,
  reducers: {
    setPresetRange(state, action: PayloadAction<PresetRange>) {
      state.range = action.payload
    },
    setCustomRange(state, action: PayloadAction<CustomRange>) {
      state.range = action.payload
    }
  }
})

export const { setPresetRange, setCustomRange } = timeRangeSlice.actions
export default timeRangeSlice.reducer


#Use-case 
import TimeSeriesDropdown from "@puneet/time-series-dropdown"
import { useAppDispatch, useAppSelector } from "@/store/hooks"
import {
  setPresetRange,
  setCustomRange
} from "@/store/timeRangeSlice"
import {
  timeSeriesOptions,
  deriveRangeFromKey
} from "@/utils/timeSeries"

const TimeFilter = () => {
  const dispatch = useAppDispatch()
  const range = useAppSelector(state => state.timeRange.range)

  return (
    <TimeSeriesDropdown
      range={range}
      options={timeSeriesOptions}
      deriveRangeFromKey={deriveRangeFromKey}
      onPresetSelect={(r) => dispatch(setPresetRange(r))}
      onCustomApply={(r) => dispatch(setCustomRange(r))}
      storageKey="dashboard-time-range"
    />
  )
}

export default TimeFilter