React Calendar Toolkit
Edit page
OverviewGetting startedDatepickerDatepicker attached to the inputChange visual theme
Customize UI
UtilitiesuseFormatDateuseThemeContextuseThemeuseScrollIntoViewuseOnClickOutside

useFormatDate

React hook. Returns function, which formats date using provided locale. Use date-fns format strings.

import locale from 'date-fns/esm/locale/ru';
import Datepicker, {useFormatDate} from 'react-calendar-toolkit';
<Datepicker dateFnsLocale={locale} />
const Component = () => {
  const formatDate = useFormatDate();
  /**
   * @param {string} pattern - Formatting pattern
   * @param {Date} date - Date object to apply format
   * @return {string} Formatted date
   */
  const date = formatDate('MMM do', new Date(2020, 0, 6)) // Янв. 6-е
  // ...
}

useThemeContext

React hook, returns theme object from component props.

import Datepicker, {useThemeContext} from 'react-calendar-toolkit';
<Datepicker theme={{foo: 'bar'}} />
// later
const Component = () => {
/**
   * @return {Object} theme object
   */
  const theme = useThemeContext(); // {foo: 'bar'}
}

useTheme

React hook, based on callback ref, to inject your theme object as CSS variables into HTML element it makes reference to. theme prop should be Record-like plain object structure Object.<string, string>.

import React, {useRef, useEffect} from 'react';
import Datepicker, {useTheme} from 'react-calendar-toolkit';
<Datepicker theme={{'--varName': 'value'}} />
// later
const Component = () => {
    const [getRef, setRef] = useTheme();
    /* Do something with ref */
    useEffect(() => {
      /* Note: we are using first member of returned tuple */
      getRef.current.focus()
    });
    return (
      /* Note: we are using second member of tuple*/
      <div ref={setRef}>
        {/*...*/}
      </div>
    )
}

By default useTheme applies theme object from props on the top of defaultTheme. If you don't need the default theme, call it with empty or custom theme object parameter.

const [getRef, setRef] = useTheme({})

useScrollIntoView

React hook to scroll ref target into view if parent container is visible.

import React, {useRef} from 'react';
import {useScrollIntoView} from 'react-calendar-toolkit';
import classes from './Year.module.css';
const Component = () => {
    const targetElement = useRef();
    /**
     * @function
     * @name useScrollIntoView
     * @description React hook. Scrolls element into viewport if parent container is visible.
     * @param {Object} ref - React ref
     * @param {string} containerSelector - Selector of containing element: '.className'
     * @param {Boolean} condition - Condition flag
     * @return {void}
     */
    useScrollIntoView(targetElement, `.${classes.scrollContainer}`, true)
    return (
      <div ref={targetElement}>
        {/*...*/}
      </div>
    )
}

useOnClickOutside

React hook to trigger provided callback when user clicks outside provided node.

import React, {useRef} from 'react';
import {useOnClickOutside} from 'react-calendar-toolkit';
const Component = () => {
    const ref = useRef();
      /**
       * @function
       * @name useOnClickOutside
       * @param {Object} ref - React ref
       * @param {Function} callback - Runs when users clicks
       * @return {void}
       */
      useOnClickOutside(ref, () => {
        toggleDatepicker(false);
      });
      return (
        <div ref={ref}>
          {/*...*/}
        </div>
      );
}