search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
7.04k stars 298 forks source link

Update Component.d.ts children type #299

Closed hdodov closed 2 years ago

hdodov commented 2 years ago

This improves types when render props are used. It will raise an error when you mistakenly forget to return a value:

<MediaQuery minWidth={1200}>
    {(matches) => {matches ? <span>desktop</span> : <span>mobile</span>}}
</MediaQuery>
Type '(matches: boolean) => void' is not assignable to type 'ReactNode | ((matches: boolean) => ReactNode)'.
  Type '(matches: boolean) => void' is not assignable to type '(matches: boolean) => ReactNode'.
    Type 'void' is not assignable to type 'ReactNode'.ts(2322)

If I switch the curly brackets for parentheses, the error correctly disappears:

<MediaQuery minWidth={1200}>
    {(matches) => (matches ? <span>desktop</span> : <span>mobile</span>)}
</MediaQuery>