Options
All
  • Public
  • Public/Protected
  • All
Menu

react-date-fns-hooks

Index

Variables

Functions

Variables

DateFnsContext

DateFnsContext: Context<{ baseDate?: DateLike; locale?: Locale }> = ...

Functions

DateFnsProvider

  • DateFnsProvider(__namedParameters: { baseDate?: DateLike; children: ReactNode; locale?: Locale }): Element

  • A React Context for date-fns functionality. Used to override locale and to set the baseDate for testing purposes.

    Parameters

    • __namedParameters: { baseDate?: DateLike; children: ReactNode; locale?: Locale }
      • Optional baseDate?: DateLike

        date used for comparison with relative dates. Useful to set for tests

      • children: ReactNode

        React contents

      • Optional locale?: Locale

        The default locale used to format dates

    Returns Element

FormatDistance

  • FormatDistance(options: { addSuffix?: boolean; date: DateLike; includeSeconds?: boolean; locale?: Locale }): Element

  • Returns a <time> component with the formatted distance to the specified date

    Parameters

    • options: { addSuffix?: boolean; date: DateLike; includeSeconds?: boolean; locale?: Locale }

      date, includeSeconds, addSuffix and locale. Passed to formatDistance

      • Optional addSuffix?: boolean
      • date: DateLike
      • Optional includeSeconds?: boolean
      • Optional locale?: Locale

    Returns Element

FormatDistanceStrict

  • FormatDistanceStrict(options: { addSuffix?: boolean; date: DateLike; locale?: Locale; roundingMethod?: "floor" | "ceil" | "round"; unit?: "second" | "minute" | "hour" | "day" | "month" | "year" }): Element

  • Returns a <time> component with the strict formatted distance to the specified date

    Parameters

    • options: { addSuffix?: boolean; date: DateLike; locale?: Locale; roundingMethod?: "floor" | "ceil" | "round"; unit?: "second" | "minute" | "hour" | "day" | "month" | "year" }

      date, addSuffix, unit, roundingMethod and locale. Passed to formatDistanceStrict

      • Optional addSuffix?: boolean
      • date: DateLike
      • Optional locale?: Locale
      • Optional roundingMethod?: "floor" | "ceil" | "round"
      • Optional unit?: "second" | "minute" | "hour" | "day" | "month" | "year"

    Returns Element

FormatRelative

  • FormatRelative(options: { date: DateLike; locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): Element

  • Returns a <time> component with the formatted relative to the specified date

    Parameters

    • options: { date: DateLike; locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }

      date, weekStartsOn and locale. Passed to formatRelative

      • date: DateLike
      • Optional locale?: Locale
      • Optional weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6

    Returns Element

useDateFunction

  • useDateFunction<T>(date: DateLike, calculation: (date: Date, baseDate: Date, locale?: Locale) => T, opts?: { baseDate?: DateLike; locale?: Locale }): T

  • Performs the argument calculation periodically and returns the result as React state. The frequency of the calculation depends on the difference between the date argument and the baseDate (default: current date). When the date is close to now, the calculation recalculates more frequently. At most calls calculation about once per second. If baseDate is provided, the value is only calculated once and never update.

    Type parameters

    • T

    Parameters

    • date: DateLike

      The date used for date-fns calculations. Passed to calculation

    • calculation: (date: Date, baseDate: Date, locale?: Locale) => T

      A function used to calculate the target value The calculation is passed the date, a baseDate and the locale

        • (date: Date, baseDate: Date, locale?: Locale): T

        • Parameters

          • date: Date
          • baseDate: Date
          • Optional locale: Locale

          Returns T

    • opts: { baseDate?: DateLike; locale?: Locale } = {}

      baseDate and locale used to override the context or current date (optional). If baseDate is provided, the result is never updated

      • Optional baseDate?: DateLike
      • Optional locale?: Locale

    Returns T

useFormatDistance

  • useFormatDistance(date: DateLike, options?: { addSuffix?: boolean; includeSeconds?: boolean; locale?: Locale }): string

  • Calls the formatDistance function from date-fns periodically, updating the returned value when needed

    Parameters

    • date: DateLike

      value passed to date-fns formatDistance

    • Optional options: { addSuffix?: boolean; includeSeconds?: boolean; locale?: Locale }

      includeSeconds, addSuffix and locale. Passed to formatDistance

      • Optional addSuffix?: boolean
      • Optional includeSeconds?: boolean
      • Optional locale?: Locale

    Returns string

useFormatDistanceStrict

  • useFormatDistanceStrict(date: DateLike, options?: { addSuffix?: boolean; locale?: Locale; roundingMethod?: "floor" | "ceil" | "round"; unit?: "second" | "minute" | "hour" | "day" | "month" | "year" }): string

  • Calls the formatDistanceStrict function from date-fns periodically, updating the returned value when needed

    Parameters

    • date: DateLike

      value passed to date-fns formatDistance

    • Optional options: { addSuffix?: boolean; locale?: Locale; roundingMethod?: "floor" | "ceil" | "round"; unit?: "second" | "minute" | "hour" | "day" | "month" | "year" }

      addSuffix, unit, roundingMethod and locale. Passed to formatDistanceStrict

      • Optional addSuffix?: boolean
      • Optional locale?: Locale
      • Optional roundingMethod?: "floor" | "ceil" | "round"
      • Optional unit?: "second" | "minute" | "hour" | "day" | "month" | "year"

    Returns string

useFormatRelative

  • useFormatRelative(date: DateLike, options?: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): string

  • Calls the formatRelative function from date-fns periodically, updating the returned value when needed

    Parameters

    • date: DateLike

      value passed to date-fns formatRelative

    • Optional options: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }

      weekStartsOn and locale. Passed to formatRelative

      • Optional locale?: Locale
      • Optional weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6

    Returns string

Generated using TypeDoc