search

joshwnj / react-visibility-sensor

Sensor component for React that notifies you when it goes in or out of the window viewport.
MIT License
2.33k stars 195 forks source link

Add TypeScript definition #153

Closed chiefGui closed 5 years ago

chiefGui commented 5 years ago

Fixes https://github.com/joshwnj/react-visibility-sensor/issues/112

Kudos to @asborisov at https://github.com/joshwnj/react-visibility-sensor/issues/112#issuecomment-413869897 for releasing the initial version of this type definition.

Please, let me know if there's something that doesn't work.

imkimchi commented 5 years ago

I get the error below is there any fix for it?

Type 'Element' is not assignable to type '(args: { isVisible: boolean; visibilityRect?: Shape | undefined; }) => any

chiefGui commented 5 years ago

@imkimchi Can I see your component and its props, please?

imkimchi commented 5 years ago 
<VisibilitySensor onChange={isVisible => onWidgetSectionVisible(isVisible, 0)} intervalDelay={50}>
  <SectionTitle> something </SectionTitle>
</VisibilitySensor>

I guess the children type problem occurs when children of VisibilitySensor is made with styled-components.

I fixed by changing children type to JSX.Element

children?: JSX.Element;
chiefGui commented 5 years ago

Oh, okay, I see your problem but that's not the most accurate solution given the current definition file. You could make it work this way:

<VisibilitySensor>
  {() => <SectionTitle />}
</VisibilitySensor>

Thing is, you're right. The definition should support non-render-props signature. I'll be updating it, thanks for the heads up!

chiefGui commented 5 years ago

Okay @imkimchi - you can try it now. It'll work with both children signature fashions.

joshwnj commented 5 years ago

Thanks @chiefGui and everyone for collaborating on this!

joshwnj commented 5 years ago

Published as v5.1.0