Create typings.d.ts

[edorivai]

This is the TypeScript typing that we're using internally. Please let me know if changes are required.

[swese44]

this will be nice to have included with the npm module, thanks!

[swese44]

query should be a string or an object with string keys and values of number, string or boolean. looks like react-media will pass a string query to window.matchMedia(query), and will pass an object query directly to json2mq:
https://github.com/akiran/json2mq

maybe this:

export interface MediaQueryObject {
    [id: string]: boolean | number | string;
}

export interface MediaProps {
    query: string | MediaQueryObject;
    ...
}

[swese44]

looks like query can also accept an array of objects, so maybe this is better:

export interface MediaQueryObject {
    [id: string]: boolean | number | string;
}

export interface MediaProps {
    query: string | MediaQueryObject | MediaQueryObject[];
    ...
}

[swese44]

children should be optional, and i believe these should specify React.ReactNode instead of JSX.Element

[swese44]

we're also missing the optional render prop:
render?: () => React.ReactNode;

[swese44]

don't forget to export the props interface so other components can access it

[edorivai]

@swese44 Thanks for all the hints! I think I've fixed all of the issues.

[mjackson]

If you'd like to include this in the npm package you'll need to add it to the files array in package.json.

[edorivai]

I've renamed the TS file to index.d.ts, and added it to the files array. Hope everything is set up properly!

One final question: the typings now depend on @types/react being installed as well, as it uses the global React.ReactNode and React.Component types. I was wondering if anyone knows the best practices around dependencies between TS typing files. I don't really have any experience with this.

[unindented]

This line is unnecessary when you bundle typings with the package like we're doing here. The module name will be the one in package.json.

[unindented]

You seem to be using tabs, but the rest of the file doesn't.

[edorivai]

Oops, my bad

[unindented]

@edorivai left two comments.

Regarding dependencies, you should import them in your index.d.ts file:

import { Component, ReactNode } from 'react';

[edorivai]

@unindented Fixed both issues, and converted index.d.ts to spaces as well 🤓

[unindented]

The line declare module 'react-media' is unnecessary in this instance, cause you're bundling the types with the module itself.

[edorivai]

Oh really, didn't know that. Nice!

[edorivai]

Btw, once everything looks okay, I'll happily squash everything into 1 commit, if you guys prefer that.

[farzadmf]

Hi,

Is this going to be merged? Is there a workaround to use the library in Typescript?

Thanks

[edorivai]

@farzadmf workaround would be to copy/paste this file into your project:
https://github.com/edorivai/react-media/blob/37aa81c350eac95bc2d8779400959abbdf87767b/index.d.ts

[farzadmf]

Thank you @edorivai , I thought of that 👍 ; just wanted to check if there's a "more official" way to do it :)

[unindented]

@mjackson any chance of getting this merged, and a new release published?