Merge pull request #8 from envato/typescript

Add TypeScript definitions

Author: mdingena

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.2",
   "description": "Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer \"web design's unicorn\" 🦄",
   "main": "dist/index.js",
+  "types": "src/index.d.ts",
   "scripts": {
     "build": "babel src/ -d dist/ --source-maps",
     "prepare": "npm run build"

src/Observe.js

@@ -4,9 +4,9 @@ import { Context } from './Context';
 import { useBreakpoints } from './useBreakpoints';
 
 const Observe = ({
-  render,
   box = undefined,
-  breakpoints = {}
+  breakpoints = {},
+  render
 }) => {
   const observeOptions = box ? { box } : {};
 

src/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+type BoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
+
+interface ResizeObserverBoxSize {
+  readonly inlineSize: number;
+  readonly blockSize: number;
+}
+
+interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+  readonly borderBoxSize: Array<ResizeObserverBoxSize> | ResizeObserverBoxSize;
+  readonly contentBoxSize: Array<ResizeObserverBoxSize> | ResizeObserverBoxSize;
+  readonly devicePixelContentBoxSize: Array<ResizeObserverBoxSize> | ResizeObserverBoxSize;
+}
+
+interface Breakpoints {
+  [key: number]: any;
+}
+
+interface BreakpointsOptions {
+  box?: BoxOptions;
+  widths?: Breakpoints;
+  heights?: Breakpoints;
+  fragment?: number;
+}
+
+interface ObservedElementProps {
+  ref: () => React.RefObject<HTMLElement>;
+}
+
+interface ObserveRenderArgs {
+  observedElementProps: ObservedElementProps;
+  widthMatch: any;
+  heightMatch: any;
+}
+
+interface ObserveProps {
+  box?: BoxOptions;
+  breakpoints?: BreakpointsOptions;
+  render: ({
+    observedElementProps,
+    widthMatch,
+    heightMatch
+  }: ObserveRenderArgs) => React.ReactNode;
+}
+
+export const Observe: (props: ObserveProps) => React.ReactNode;
+
+export const useBreakpoints: (options: BreakpointsOptions, injectResizeObserverEntry?: ResizeObserverEntry) => [any, any];
+
+export const useResizeObserverEntry: (injectResizeObserverEntry?: ResizeObserverEntry) => ResizeObserverEntry | null;
+
+export const Context: React.Context<ResizeObserverEntry | null>;