Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add typescript typings #13

Open
renatorib opened this issue Aug 29, 2017 · 5 comments
Open

Add typescript typings #13

renatorib opened this issue Aug 29, 2017 · 5 comments

Comments

@renatorib
Copy link
Owner

No description provided.

@renatorib renatorib self-assigned this Aug 29, 2017
@yoyurec
Copy link

yoyurec commented Mar 25, 2019

any news? )

@renatorib
Copy link
Owner Author

Unfortunately not, but we are open to pull-requests if anyone is willing to help!

@janKir
Copy link

janKir commented Apr 16, 2019

The following piece in the declarations.d.ts works for me with the withSizes function:

declare module 'react-sizes' {
  export interface Sizes {
    width: number | false;
    height: number | false;
  }
  type mapSizesToProps<SP extends object> = (sizes: Sizes) => SP;

  export function withSizes<SP extends object, P extends SP>(
    mapSizesToProps: mapSizesToProps<SP>,
  ): (component: React.ComponentType<P>) => React.ComponentType<P>;

  export default withSizes;
}

Note: This way, the output component expects the same props as the input component. Since withSizes already sets some props, this might raise issues with mandatory props. Therefore, you could e.g. use the Subtract<T, T1> type of the utility-types package. But I wanted to keep it simple for my use case.

@micahstubbs
Copy link

micahstubbs commented May 31, 2019

thanks for contributing these types @janKir! I just created a PR to DefinitelyTyped with the types from your comment DefinitelyTyped/DefinitelyTyped#36058

the only modification that I made as to remove the | false from the Sizes interface. In my usage at least, I didn't find a case where either width or height was false or boolean. Otherwise, these type definitions work great in my project.

@micahstubbs
Copy link

meant to post this here earlier, but my PR made it into DefinitelyTyped 🎉

you can see the types for react-sizes here:
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-sizes

you can use the types in your TypeScript project with this command:

yarn add -D @types/react-sizes

pinn3 added a commit to pinn3/DefinitelyTyped that referenced this issue Feb 27, 2021
The output component after the HOC has been applied should not support
the same props that are injected by it. Even if it did support them,
they would be overwritten by the HOC.

More details on this can be found in the original draft for these types:
renatorib/react-sizes#13 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants