hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.57k stars 658 forks source link

dayContentRenderer in TypeScript #513

Open whalesg opened 2 years ago

whalesg commented 2 years ago

Subject of the issue

Recently, I used this package in React Typescript project and customized day rendering. But when I run yarn build, a typescript error happens..

Property 'dayContentRenderer' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<DateRange> & Readonly<DateRangeProps> & Readonly<...>'.

So, checked index.d.ts in this package, it seems like DateRangeProps missed dayContentRenderer now.

[BUG] Expected behaviour

Can you add this field in DateRangeProps interface?

Environment

Package Version: ^1.3.0 React version: ^17.0.2 Node version: 12.22.5 Browser: Chrome

whalesg commented 2 years ago

Oh, I solved this problem by extending interface..

jan-woltering commented 2 years ago

@whalesg how exactly did you extend the interface? I added a custom index.d.ts with the following code but it does not seem to work properly.

declare module 'react-date-range' {
  interface DateRangePickerPropsCustom extends DateRangePickerProps {
    dayContentRenderer?: null | ((day) => React.ReactNode);
  }

  export class DateRangePickerCustom extends React.Component<DateRangePickerPropsCustom> {}
}

I'd appreciate if you share your code snippets for everyone with the same problem. Cheers.

whalesg commented 2 years ago

I created react-date-range.d.ts file.. and wrote following codes.

import "react-date-range";

declare module "react-date-range" {
  interface DateRangeProps {
    dayContentRenderer: any;
  }
}