Skip to content

Commit d4d08e2

Browse files
mdingenamdingena
committed
Add types (WIP)
1 parent 6446e47 commit d4d08e2

File tree

4 files changed

+264
-0
lines changed

4 files changed

+264
-0
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.1",
44
"description": "Observe multiple React components with a single ResizeObserver.",
55
"main": "dist/index.js",
6+
"types": "src/index.d.ts",
67
"scripts": {
78
"build": "babel src/ -d dist/ --source-maps",
89
"prepare": "npm run build"

‎src/ResizeObserver/LICENSE

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright 2020 Jason Strothmann
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎src/ResizeObserver/index.d.ts

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
/**
2+
* The **ResizeObserver** interface reports changes to the dimensions of an
3+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
4+
* or border box, or the bounding box of an
5+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
6+
*
7+
* > **Note**: The content box is the box in which content can be placed,
8+
* > meaning the border box minus the padding and border width. The border box
9+
* > encompasses the content, padding, and border. See
10+
* > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
11+
* > for further explanation.
12+
*
13+
* `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
14+
* are often created when resizing via a callback function. It does this by only
15+
* processing elements deeper in the DOM in subsequent frames. Implementations
16+
* should, if they follow the specification, invoke resize events before paint
17+
* and after layout.
18+
*
19+
* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
20+
*/
21+
declare class ResizeObserver {
22+
/**
23+
* The **ResizeObserver** constructor creates a new `ResizeObserver` object,
24+
* which can be used to report changes to the content or border box of an
25+
* `Element` or the bounding box of an `SVGElement`.
26+
*
27+
* @example
28+
* var ResizeObserver = new ResizeObserver(callback)
29+
*
30+
* @param callback
31+
* The function called whenever an observed resize occurs. The function is
32+
* called with two parameters:
33+
* * **entries**
34+
* An array of
35+
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
36+
* objects that can be used to access the new dimensions of the element
37+
* after each change.
38+
* * **observer**
39+
* A reference to the `ResizeObserver` itself, so it will definitely be
40+
* accessible from inside the callback, should you need it. This could be
41+
* used for example to automatically unobserve the observer when a certain
42+
* condition is reached, but you can omit it if you don't need it.
43+
*
44+
* The callback will generally follow a pattern along the lines of:
45+
* ```js
46+
* function(entries, observer) {
47+
* for (let entry of entries) {
48+
* // Do something to each entry
49+
* // and possibly something to the observer itself
50+
* }
51+
* }
52+
* ```
53+
*
54+
* The following snippet is taken from the
55+
* [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
56+
* ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
57+
* example:
58+
* @example
59+
* const resizeObserver = new ResizeObserver(entries => {
60+
* for (let entry of entries) {
61+
* if(entry.contentBoxSize) {
62+
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
63+
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
64+
* } else {
65+
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
66+
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
67+
* }
68+
* }
69+
* });
70+
*
71+
* resizeObserver.observe(divElem);
72+
*/
73+
constructor(callback: ResizeObserverCallback);
74+
75+
/**
76+
* The **disconnect()** method of the
77+
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
78+
* interface unobserves all observed
79+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
80+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
81+
* targets.
82+
*/
83+
disconnect: () => void;
84+
85+
/**
86+
* The `observe()` method of the
87+
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
88+
* interface starts observing the specified
89+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
90+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
91+
*
92+
* @example
93+
* resizeObserver.observe(target, options);
94+
*
95+
* @param target
96+
* A reference to an
97+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
98+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
99+
* to be observed.
100+
*
101+
* @param options
102+
* An options object allowing you to set options for the observation.
103+
* Currently this only has one possible option that can be set.
104+
*/
105+
observe: (target: Element, options?: ResizeObserverObserveOptions) => void;
106+
107+
/**
108+
* The **unobserve()** method of the
109+
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
110+
* interface ends the observing of a specified
111+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
112+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
113+
*/
114+
unobserve: (target: Element) => void;
115+
}
116+
117+
interface ResizeObserverObserveOptions {
118+
/**
119+
* Sets which box model the observer will observe changes to. Possible values
120+
* are `content-box` (the default), and `border-box`.
121+
*
122+
* @default "content-box"
123+
*/
124+
box?: "content-box" | "border-box";
125+
}
126+
127+
/**
128+
* The function called whenever an observed resize occurs. The function is
129+
* called with two parameters:
130+
*
131+
* @param entries
132+
* An array of
133+
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
134+
* objects that can be used to access the new dimensions of the element after
135+
* each change.
136+
*
137+
* @param observer
138+
* A reference to the `ResizeObserver` itself, so it will definitely be
139+
* accessible from inside the callback, should you need it. This could be used
140+
* for example to automatically unobserve the observer when a certain condition
141+
* is reached, but you can omit it if you don't need it.
142+
*
143+
* The callback will generally follow a pattern along the lines of:
144+
* @example
145+
* function(entries, observer) {
146+
* for (let entry of entries) {
147+
* // Do something to each entry
148+
* // and possibly something to the observer itself
149+
* }
150+
* }
151+
*
152+
* @example
153+
* const resizeObserver = new ResizeObserver(entries => {
154+
* for (let entry of entries) {
155+
* if(entry.contentBoxSize) {
156+
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
157+
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
158+
* } else {
159+
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
160+
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
161+
* }
162+
* }
163+
* });
164+
*
165+
* resizeObserver.observe(divElem);
166+
*/
167+
type ResizeObserverCallback = (
168+
entries: ResizeObserverEntry[],
169+
observer: ResizeObserver,
170+
) => void;
171+
172+
/**
173+
* The **ResizeObserverEntry** interface represents the object passed to the
174+
* [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
175+
* constructor's callback function, which allows you to access the new
176+
* dimensions of the
177+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
178+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
179+
* being observed.
180+
*/
181+
interface ResizeObserverEntry {
182+
/**
183+
* An object containing the new border box size of the observed element when
184+
* the callback is run.
185+
*/
186+
readonly borderBoxSize: ResizeObserverEntryBoxSize;
187+
188+
/**
189+
* An object containing the new content box size of the observed element when
190+
* the callback is run.
191+
*/
192+
readonly contentBoxSize: ResizeObserverEntryBoxSize;
193+
194+
/**
195+
* A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
196+
* object containing the new size of the observed element when the callback is
197+
* run. Note that this is better supported than the above two properties, but
198+
* it is left over from an earlier implementation of the Resize Observer API,
199+
* is still included in the spec for web compat reasons, and may be deprecated
200+
* in future versions.
201+
*/
202+
// node_modules/typescript/lib/lib.dom.d.ts
203+
readonly contentRect: DOMRectReadOnly;
204+
205+
/**
206+
* A reference to the
207+
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
208+
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
209+
* being observed.
210+
*/
211+
readonly target: Element;
212+
}
213+
214+
/**
215+
* The **borderBoxSize** read-only property of the
216+
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
217+
* interface returns an object containing the new border box size of the
218+
* observed element when the callback is run.
219+
*/
220+
interface ResizeObserverEntryBoxSize {
221+
/**
222+
* The length of the observed element's border box in the block dimension. For
223+
* boxes with a horizontal
224+
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
225+
* this is the vertical dimension, or height; if the writing-mode is vertical,
226+
* this is the horizontal dimension, or width.
227+
*/
228+
blockSize: number;
229+
230+
/**
231+
* The length of the observed element's border box in the inline dimension.
232+
* For boxes with a horizontal
233+
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
234+
* this is the horizontal dimension, or width; if the writing-mode is
235+
* vertical, this is the vertical dimension, or height.
236+
*/
237+
inlineSize: number;
238+
}
239+
240+
interface Window {
241+
ResizeObserver: ResizeObserver;
242+
}

‎src/index.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
interface ProviderProps {
4+
ponyfill?: ResizeObserver;
5+
children: React.ReactNode;
6+
}
7+
8+
export const ResizeObserverContext: React.Context<ResizeObserver | null>;
9+
10+
export const Provider: (props: ProviderProps) => React.ReactNode;
11+
12+
export const createResizeObserver: (ResizeObserver: ResizeObserver) => ResizeObserver;
13+
14+
export const useResizeObserver: (options?: ResizeObserverObserveOptions) => [React.RefObject, ResizeObserverEntry];

0 commit comments

Comments
 (0)