How to use is-touch-device - 10 common examples

formatDate: isTouchDevice() ? undefined : this.formatter,
      // Gets the corresponding locale. For English we must set it as null.
      // TODO make this asynchronous when more languages available
      locale: this.props.intl.locale.startsWith('de') ? German : null,
      mode: this.props.mode,
      noCalendar: this.props.timeScale === 'time',
      onChange: this.handleChange,
      time_24hr: this.props.intl.locale.startsWith('de'),
      wrap: true,
    };
  }

  // initializing on hove is not feasible for touch-devices, so we init-right away
  // flatpickr does not do its expensive initialization on mobile, so this is safe
  state = {
    initialize: this.props.shouldInitializeOnMount || isTouchDevice(),
  };

  componentDidMount() {
    if (this.shouldInitializeFlatpickr(this.state)) {
      this.initDatepicker();
    }
  }

  shouldInitializeFlatpickr = state => !this.flatpickr && state.initialize;

  // eslint-disable-next-line camelcase
  UNSAFE_componentWillUpdate(nextProps, nextState) {
    if (this.flatpickr && this.props.value !== nextProps.value) {
      this.flatpickr.setDate(
        nextProps.value &&
          presentInput({

import isTouchDevice from 'is-touch-device';

const EVENT_NAME = 'window-resize';

let instance = null;
let instancesCount = 0;

const orientations = {
  LANDSCAPE: '(orientation: landscape)',
  PORTRAIT: '(orientation: portrait)',
};

const IS_TOUCH_DEVICE = isTouchDevice();

const isWindowDefined = typeof window !== 'undefined';

// ------------------------------------------------
// Custom Event detection
// ------------------------------------------------
const supportsCustomEvents = isWindowDefined && typeof window.CustomEvent === 'function';

// ------------------------------------------------
// Window Manager
// ------------------------------------------------
export default class WindowManager {
  constructor(breakpoints, debounceTime = 250) {
    if (!isWindowDefined) {
      // Silently return null if it is used on server
      return null;

window,
      'resize',
      this.responsivizePickerPosition,
      { passive: true },
    );
    this.responsivizePickerPosition();
    this.disableScroll();

    const { focusedInput } = this.props;
    if (focusedInput) {
      this.setState({
        isDateRangePickerInputFocused: true,
      });
    }

    this.isTouchDevice = isTouchDevice();
  }

constructor(props) {
    super(props);

    this.isTouchDevice = isTouchDevice();
    this.today = moment();
    this.modifiers = {
      today: (day) => this.isToday(day),
      blocked: (day) => this.isBlocked(day),
      'blocked-calendar': (day) => props.isDayBlocked(day),
      'blocked-out-of-range': (day) => props.isOutsideRange(day),
      'highlighted-calendar': (day) => props.isDayHighlighted(day),
      valid: (day) => !this.isBlocked(day),
      'selected-start': (day) => this.isStartDate(day),
      'selected-end': (day) => this.isEndDate(day),
      'blocked-minimum-nights': (day) => this.doesNotMeetMinimumNights(day),
      'selected-span': (day) => this.isInSelectedSpan(day),
      'last-in-range': (day) => this.isLastInRange(day),
      hovered: (day) => this.isHovered(day),
      'hovered-span': (day) => this.isInHoveredSpan(day),
      'hovered-offset': (day) => this.isInHoveredSpan(day),

componentDidMount() {
    this.isTouchDevice = isTouchDevice();
  }

constructor(props) {
    super(props);

    this.isTouchDevice = isTouchDevice();
    this.today = moment();
    this.modifiers = {
      today: day => this.isToday(day),
      blocked: day => this.isBlocked(day),
      'blocked-calendar': day => props.isDayBlocked(day),
      'blocked-out-of-range': day => props.isOutsideRange(day),
      'highlighted-calendar': day => props.isDayHighlighted(day),
      valid: day => !this.isBlocked(day),
      'selected-start': day => this.isStartDate(day),
      'selected-end': day => this.isEndDate(day),
      'blocked-minimum-nights': day => this.doesNotMeetMinimumNights(day),
      'selected-span': day => this.isInSelectedSpan(day),
      'last-in-range': day => this.isLastInRange(day),
      hovered: day => this.isHovered(day),
      'hovered-span': day => this.isInHoveredSpan(day),
      'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),

'resize',
      this.responsivizePickerPosition,
      { passive: true },
    );
    this.responsivizePickerPosition();
    this.disableScroll();

    const { focused } = this.props;

    if (focused) {
      this.setState({
        isInputFocused: true,
      });
    }

    this.isTouchDevice = isTouchDevice();
  }

const translationValue = props.isRTL && this.isHorizontal()
      ? -getCalendarMonthWidth(props.daySize, horizontalMonthPadding)
      : 0;

    this.hasSetInitialVisibleMonth = !props.hidden;
    this.state = {
      currentMonth,
      monthTransition: null,
      translationValue,
      scrollableMonthMultiple: 1,
      calendarMonthWidth: getCalendarMonthWidth(props.daySize, horizontalMonthPadding),
      focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
      nextFocusedDate: null,
      showKeyboardShortcuts: props.showKeyboardShortcuts,
      onKeyboardShortcutsPanelClose() {},
      isTouchDevice: isTouchDevice(),
      withMouseInteractions: true,
      calendarInfoWidth: 0,
      monthTitleHeight: null,
      hasSetHeight: false,
    };

    this.setCalendarMonthWeeks(currentMonth);

    this.calendarMonthGridHeight = 0;
    this.setCalendarInfoWidthTimeout = null;
    this.setCalendarMonthGridHeightTimeout = null;

    this.onKeyDown = this.onKeyDown.bind(this);
    this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
    this.onPrevMonthClick = this.onPrevMonthClick.bind(this);
    this.onPrevMonthTransition = this.onPrevMonthTransition.bind(this);

this.responsivizePickerPosition,
      { passive: true },
    );

    this.responsivizePickerPosition();
    this.disableScroll();

    const { focused } = this.props;

    if (focused) {
      this.setState({
        isInputFocused: true,
      });
    }

    this.isTouchDevice = isTouchDevice();
  }

componentDidMount() {
    this.setState({ isTouchDevice: isTouchDevice() });
  }