Home
GitHub

Modular hooks

Modular hooks aim to streamline code usage and minimize redundancy, thereby reducing the size of your application. They offer the capability to distribute functionalities across components, fostering a more organized and efficient code structure. This approach was employed and demonstrated in the modular hooks solution guide for effective implementation and management of functionalities within the datepicker.

useDatePickerState

The useDatePickerState represents a general utility state function that receives a configuration object and returns a specific internal datepicker state that can be utilized across all modular hooks.

type UseDatePickerState = (config: DPUserConfig): DPState;
type UseDatePickerState = (config: DPUserConfig): DPState;

Internally, this utility function employs useReducer to manage and capture the datepicker state. It also provides a dispatch function for manipulating the state as needed within the datepicker functionalities.

export interface DPReducerState {
  focusDate?: Date;
  rangeEnd: Date | null;
  offsetDate: Date;
  offsetYear: number;
}
 
export type DPReducerAction =
  | DPSetFocusDate
  | DPSetOffsetDate
  | DPSetYearAction
  | DPSetRangeEndAction;
 
export interface DPState {
  dispatch: Dispatch<DPReducerAction>;
  state: DPReducerState;
  selectedDates: Date[];
  offsetDate: Date;
  config: DPConfig;
}
export interface DPReducerState {
  focusDate?: Date;
  rangeEnd: Date | null;
  offsetDate: Date;
  offsetYear: number;
}
 
export type DPReducerAction =
  | DPSetFocusDate
  | DPSetOffsetDate
  | DPSetYearAction
  | DPSetRangeEndAction;
 
export interface DPState {
  dispatch: Dispatch<DPReducerAction>;
  state: DPReducerState;
  selectedDates: Date[];
  offsetDate: Date;
  config: DPConfig;
}

In the modular hooks setup, the various hooks utilize the state and dispatch functions derived from the useDatePickerState hook. The DatePickerStateProvider utilizes this hook and then propagates this state and dispatch capability through context across the date-picker components.

type DatePickerStateProviderValue = DPState;
type DatePickerStateProviderValue = DPState;

useCalendars

The useCalendars hook is a data-centric hook that provides access to the calendars and weekDays.

type DPUseCalendars = (state: DPState) => {
  calendars: DPCalendar[];
  weekDays: string[];
};
type DPUseCalendars = (state: DPState) => {
  calendars: DPCalendar[];
  weekDays: string[];
};

It furnishes essential entities required for constructing a Calendar UI, offering foundational data without interactive functionalities.

useDays

The useDays hook, similar to useCalendars, is data-centric and offers access to the selectedDates and formattedDates. This hook provides selected dates from the config and their formatted representations within the datepicker.

export type DPUseDays = (state: DPState) => {
  selectedDates: Date[];
  formattedDates: string[];
};
export type DPUseDays = (state: DPState) => {
  selectedDates: Date[];
  formattedDates: string[];
};

useDaysPropGetters

The useDaysPropGetters returns the dayButton prop-getter for dates selection.

export type DPUseDaysPropGetters = (state: DPState) => {
  dayButton: (day: DPDay, config?: DPPropsGetterConfig) => DPPropGetter;
};
export type DPUseDaysPropGetters = (state: DPState) => {
  dayButton: (day: DPDay, config?: DPPropsGetterConfig) => DPPropGetter;
};

useMonths

The useMonths is a data-centric hook that provides access to the months data.

export type DPUseMonths = (state: DPState) => {
  months: DPMonth[];
};
export type DPUseMonths = (state: DPState) => {
  months: DPMonth[];
};

useMonthsPropGetters

The useMonthsPropGetters returns the monthButton prop-getter for months selection.

export type DPUseMonthsPropGetters = (state: DPState) => {
  monthButton: (month: DPMonth, config?: DPPropsGetterConfig) => DPPropGetter;
};
export type DPUseMonthsPropGetters = (state: DPState) => {
  monthButton: (month: DPMonth, config?: DPPropsGetterConfig) => DPPropGetter;
};

useTime

The useTime is a data-centric hook that provides access to the time data.

export type DPUseTime = (state: DPState) => {
  time: DPTime[];
};
export type DPUseTime = (state: DPState) => {
  time: DPTime[];
};

useTimePropGetters

The useTimePropGetters returns the timeButton prop-getter for time selection.

export type DPUseTimePropGetter = (state: DPState) => {
  timeButton: (time: DPTime, config?: DPPropsGetterConfig) => DPPropGetter;
};
export type DPUseTimePropGetter = (state: DPState) => {
  timeButton: (time: DPTime, config?: DPPropsGetterConfig) => DPPropGetter;
};

useDatePickerOffsetPropGetters

The useDatePickerOffsetPropGetters is a general purpose hook that returns the addOffset, setOffset, and subtractOffset prop-getters for offset manipulation.

export type DPUseDatePickerOffsetPropGetters = (state: DPState) => {
  addOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
  setOffset: (date: Date) => DPPropGetter;
  subtractOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
};
export type DPUseDatePickerOffsetPropGetters = (state: DPState) => {
  addOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
  setOffset: (date: Date) => DPPropGetter;
  subtractOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
};

useYears

The useYears is a data-centric hook that provides access to the years data.

export type DPUseYears = (state: DPState) => {
  years: DPYear[];
};
export type DPUseYears = (state: DPState) => {
  years: DPYear[];
};

useYearsPropGetters

The useYearsPropGetters returns the yearButton, nextYearsButton, and previousYearsButton prop-getters for years manipulation.

export type DPUseYearsPropGetters = (state: DPState) => {
  yearButton: (year: DPYear, config?: DPPropsGetterConfig) => DPPropGetter;
  nextYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
  previousYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
};
export type DPUseYearsPropGetters = (state: DPState) => {
  yearButton: (year: DPYear, config?: DPPropsGetterConfig) => DPPropGetter;
  nextYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
  previousYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
};

Context Hooks

The library offers a range of context hooks that follow a consistent API structure, distinguished by the prefix "Context." These context hooks are intended to be utilized within the DatePickerStateProvider component, as demonstrated in the modular hooks solution guide. These hooks provide access to specific functionalities and data within the datepicker's context.

These don't require parameters to be passed explicitly. Instead, they directly access the context value provided by the DatePickerStateProvider, allowing seamless utilization of the date-picker state

Prop getters