v2.0.0 - Typings issue for Breakpoint and useCurrentWidth/useCurrentBreakpointName

The new TypeScript typings break custom breakpoint names for Breakpoint (i.e. sm, md, lg, etc). I currently get the following error:

Type '{ children: Element; sm: true; down: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Breakpoint> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
  Property 'sm' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Breakpoint> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

Just a suggestion, but either have a breakpoint prop that accepts a string with the following typing (also probably more maintainable):

interface Props {
  children?: React.ReactNode;
  breakpoint?: string;
  up?: boolean;
  down?: boolean;
  only?: boolean;
  tagName?: string;
  className?: string;
}

Or change the Props typing to the following (which unfortunately lets more in but doesn’t restrict the use of the library):

interface Props<T extends any> {
  children?: React.ReactNode;
  up?: boolean;
  down?: boolean;
  only?: boolean;
  tagName?: string;
  className?: string;
}

Also, you’re missing typings for useCurrentWidth and useCurrentBreakpointName:

export function useCurrentWidth(): number;
export function userCurrentBreakpointName(): string;

[dbryantm]

Just an FYI, if you look at the following example:

TypeScript Playground - Proposed Solution Issues

I think we’re going to have to go with something closer to my first suggested solution. I’ll still go ahead and submit a PR but would like to get your thoughts using that as evidence for my findings. Thanks in advance!

[flexdinesh]

Changes published in v2.0.1. Thanks @dbryantm @nutboltu @guschnwg! 🎉