search

maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

useResizeDetector Type updates for better React Typescript compatibility (Addresses #108) #118

Closed SteffeyDev closed 3 years ago

SteffeyDev commented 3 years ago

Part 1: useResizeDetector fixes

I experienced the same issue as @stefann01: https://github.com/maslianok/react-resize-detector/issues/108#issuecomment-760239999

This pull request fixes that issue by changing MutableRefObject<undefined | Element> to MutableRefObject<null | Element>, because the ref prop on a div expects a RefObject<null | HTMLDivElement>. Also allows an optional dynamic type element RefType, so that the hook can be used as so:

const { width, height, ref } = useResizeDetector<HTMLDivElement>();

This allows for the ref to be passed to a <div /> more easily in typescript and allows developers to use other HTMLDivElement-specific properties on the ref.

Part 2: ResizeDetector fixes

I noticed a type discrepancy in the main ResizeDetector component that prevented its use in my strictly-typed application. As you'll see in the changes, I updated the type to that what was actually passed to the child function is what was declared in the props that would be passed.

I tested these changes on my own project and it resolves the typescript issues and appears to behave the same.

maslianok commented 3 years ago

Wow, thanks for your help, looks great 👍

SteffeyDev commented 3 years ago

Awesome, thanks for merging so quickly!