TypeScript

This package ships with TypeScript typings out of the box. As TypeScript is a typed superset of JavaScript, you can use this package as you used to in JavaScript but there are some pitfalls that you should notice.

Type-safety with React Hooks

It's important to define generic type variable explicitly in useState hook when you want to use React hooks with react-modern-calendar-datepicker in TypeScript.

You can use Day and DayRange types that has been exported by this package to define generic type variable.

import React from 'react'
import DatePicker, { DayValue, DayRange, Day } from 'react-modern-calendar-datepicker'

function App() {
  const [day, setDay] = React.useState<DayValue>(null);
  const [dayRange, setDayRange] = React.useState<DayRange>({
    from: null,
    to: null
  });
  const [days, setDays] = React.useState<Day[]>([]);

  return (
    <>
      <DatePicker value={day} onChange={setDay} />
      <DatePicker value={dayRange} onChange={setDayRange} />
      <DatePicker value={days} onChange={setDays} />
    </>
  );
}