Wrong type for useMeasure hook

[lukasbach]

The example code for the useMeasure hook produces type errors:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCy6CGrlTpwC+cAZlBCHAESE4DGMAtGujQNwBQokscAJVxNylanWExOXLgwgA7VPAAi6EBDgBeOAAoAlFoB8iLnDhzF8ANqEyAGkRwAHg4CeDgO7AAJjAAWDn7owADmfjAOMBBgDlCh4Q4ARhAwUSAOADboZPDEALpaKBjYeATo+tymcIQwBPK6VWYAPN7AAG7V2ZoItsSGjWZwLe2GTgBciE7ETQD0rW2GAJADzfOGrhMIrtNzIytDa16+fptH-jtr+8MLQfEwm7dhMBd7g4PXhlFgm18vC1drOJPTZA8J-fpvVYjZKpKibGFpcEAkZZHKbVHPWaXN5Y15wPTcYgcIA

From what I can tell, the issue is located here: https://github.com/streamich/react-use/blob/master/src/useMeasure.ts#L9

A typical DOM element has a ref function type of (element: E | null) => void. useMeasure however produces a hook typed like (element: E) => void, which is incompatible. It should be possible to fix this by changing line 9 of useMeasure.ts to

export type UseMeasureRef<E extends Element = Element> = (element: E | null) => void;

I can happily take a PR on this.

[johntimothybailey]

const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure<HTMLDivElement>();

  return (
    <div ref={ref}>
      <div>x: {x}</div>	
      <div>y: {y}</div>
      <div>width: {width}</div>
      <div>height: {height}</div>
      <div>top: {top}</div>
      <div>right: {right}</div>
      <div>bottom: {bottom}</div>
      <div>left: {left}</div>
    </div>
  );