react-use

react-use copied to clipboard

Is your feature request related to a problem? Please describe. When you use createBreakpoint, the return type of the function it creates is a general string. That can be problematic in TypeScript consumers with noImplicitAny enabled because the general string type cannot be used to index an object with a known set of keys and no index signature.

(too much TypeScript jargon? see this playground example)

Describe the solution you'd like We can change createBreakpoint to have a template type for its input that extends Record<string, number> and have its function return a keyof that type.

const createBreakpoint<Breakpoints extends Record<string, number>>(
  breakpoints: Breakpoints = { laptopL: 1440, laptop: 1024, tablet: 768 }
) => () => {

There might be some more type massaging that needs to be done internally to make TypeScript happy... I haven't looked too deeply.

Describe alternatives you've considered

const useBreakpoint = createBreakpoint(breakpoints) as () => keyof typeof breakpoints;

I've opened this PR related to this issue quite a while ago, but I'm not sure if it is ever getting merged https://github.com/streamich/react-use/pull/2240

Closing out my old issues I no longer have context on. If anybody else is still seeing this, I'd encourage you to file a new issue with more information. Cheers!