useToggleuseToggle+useEventRefuseSafeEffectuseEventControluseDebounceuseThrottleuseClickOutsideuseTabsuseDateuseDatesuseImageuseCaptureuseIntersectionObserver
react react-hook ironman30

useDate

A hook aims for manipulate date.


LINKS

鐵人賽文章

const [date, dateDispatch] = useDate(configs)

//implented with [`date-fns`](https://date-fns.org/)

libs

date-fns

Configs

name type default description
defaultDateDate Object | stringnull
formatPatternstringyyyy-MM-dd see date-fns doc
transitionUnitstringdays see date-fns doc
offsetUnitstringdays see date-fns doc
offsetValuenumber0

Return

name type description
datestring
dateDispatchfunction dateDispatch(type, payload), see below

Method

dateDispatch(type, payload)
type payload description
BACKWARDnumber | void

payload default as 1 when not provided

FORWARDnumber | void

payload default as 1 when not provided

NOW

To NOW

TODate Object | string

To specific date


Default Config

Date: 2024-11-21

const defaultConfigs = {
  defaultDate: null,
  formatPattern: "yyyy-MM-dd",
  transitionUnit: "days",
  offsetUnit: "days",
  offsetValue: 0,
}

Custom Config

Date: 2022-08-28

const defaultConfigs = {
  defaultDate: "2022-08-30",
  formatPattern: "yyyy-MM-dd",
  transitionUnit: "months",
  offsetUnit: "days",
  offsetValue: -2,
}