Skip to content

Commit 878c0c6

Browse files
wellyshenwellyshen
authored
Merge pull request #747 from sirkrisp/zero-width
Set initial values to null
2 parents 727eefa + 2423b9c commit 878c0c6

File tree

4 files changed

+80
-35
lines changed

4 files changed

+80
-35
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
node_modules
55
dist
66
coverage
7-
.size-snapshot.json
7+
.size-snapshot.json

‎README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -225,14 +225,14 @@ const returnObj = useDimensions(options?: object);
225225
226226
It's returned with the following properties.
227227
228-
| Key | Type | Default | Description |
229-
| ------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
230-
| `observe` | function | | To set a target element for measuring or re-start observing the current target element. |
231-
| `unobserve` | function | | To stop observing the current target element. |
232-
| `width` | number | | The width of the target element in pixel. |
233-
| `height` | number | | The height of the target element in pixel. |
234-
| `currentBreakpoint` | string | | Indicates the current breakpoint of the [responsive components](#responsive-components). |
235-
| `entry` | object | | The [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) of the target element. |
228+
| Key | Type | Default | Description |
229+
| ------------------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
230+
| `observe` | function | | To set a target element for measuring or re-start observing the current target element. |
231+
| `unobserve` | function | | To stop observing the current target element. |
232+
| `width` | number or null | null | The width of the target element in pixel. Null while target has not mounted. |
233+
| `height` | number or null | null | The height of the target element in pixel. Null while target has not mounted.Z |
234+
| `currentBreakpoint` | string | | Indicates the current breakpoint of the [responsive components](#responsive-components). |
235+
| `entry` | object | | The [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) of the target element. |
236236
237237
### Parameter
238238

‎src/__tests__/useDimensions.ts‎

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,41 @@ describe("useDimensions", () => {
4343
const { result } = renderHelper();
4444
expect(observe).not.toHaveBeenCalled();
4545

46-
result.current.observe();
46+
act(() => {
47+
result.current.observe();
48+
});
4749
expect(observe).not.toHaveBeenCalled();
4850
});
4951

5052
it("should return workable observe method", () => {
5153
const { result } = renderHelper();
52-
result.current.observe(target);
54+
act(() => {
55+
result.current.observe(target);
56+
});
5357
expect(disconnect).toHaveBeenCalledTimes(1);
5458
expect(observe).toHaveBeenCalledTimes(1);
5559

56-
result.current.observe();
60+
act(() => {
61+
result.current.observe();
62+
});
5763
expect(observe).toHaveBeenCalledTimes(2);
5864
});
5965

6066
it("should not observe repeatedly", () => {
6167
const { result } = renderHelper();
62-
result.current.observe(target);
68+
act(() => {
69+
result.current.observe(target);
70+
});
6371
expect(disconnect).toHaveBeenCalledTimes(1);
6472

65-
result.current.observe(target);
73+
act(() => {
74+
result.current.observe(target);
75+
});
6676
expect(disconnect).toHaveBeenCalledTimes(1);
6777

68-
result.current.observe(document.createElement("div"));
78+
act(() => {
79+
result.current.observe(document.createElement("div"));
80+
});
6981
expect(disconnect).toHaveBeenCalledTimes(2);
7082
});
7183

@@ -77,7 +89,9 @@ describe("useDimensions", () => {
7789

7890
it("should return width and height correctly", () => {
7991
const { result } = renderHelper();
80-
result.current.observe(target);
92+
act(() => {
93+
result.current.observe(target);
94+
});
8195

8296
expect(result.current.width).toBe(0);
8397
expect(result.current.height).toBe(0);
@@ -96,7 +110,9 @@ describe("useDimensions", () => {
96110
it("should use border-box size", () => {
97111
console.warn = jest.fn();
98112
let { result } = renderHelper({ useBorderBoxSize: true });
99-
result.current.observe(target);
113+
act(() => {
114+
result.current.observe(target);
115+
});
100116
const contentBoxSize = { blockSize: 100, inlineSize: 100 };
101117
act(() => {
102118
triggerObserverCb({ contentBoxSize });
@@ -109,7 +125,9 @@ describe("useDimensions", () => {
109125

110126
console.warn = jest.fn();
111127
result = renderHelper({ useBorderBoxSize: true }).result;
112-
result.current.observe(target);
128+
act(() => {
129+
result.current.observe(target);
130+
});
113131
const borderBoxSize = { blockSize: 110, inlineSize: 110 };
114132
act(() => triggerObserverCb({ contentBoxSize, borderBoxSize }));
115133
expect(console.warn).not.toHaveBeenCalledWith(borderBoxWarn);
@@ -119,18 +137,24 @@ describe("useDimensions", () => {
119137

120138
it("should return currentBreakpoint correctly", () => {
121139
let { result } = renderHelper();
122-
result.current.observe(target);
140+
act(() => {
141+
result.current.observe(target);
142+
});
123143
expect(result.current.currentBreakpoint).toBe("");
124144

125145
result = renderHelper({ breakpoints: { T1: 100 } }).result;
126-
result.current.observe(target);
146+
act(() => {
147+
result.current.observe(target);
148+
});
127149
act(() => triggerObserverCb({ contentRect: { width: 0 } }));
128150
expect(result.current.currentBreakpoint).toBe("");
129151
act(() => triggerObserverCb({ contentRect: { width: 99 } }));
130152
expect(result.current.currentBreakpoint).toBe("");
131153

132154
result = renderHelper({ breakpoints: { T0: 0, T1: 100 } }).result;
133-
result.current.observe(target);
155+
act(() => {
156+
result.current.observe(target);
157+
});
134158
act(() => triggerObserverCb({ contentRect: { width: 0 } }));
135159
expect(result.current.currentBreakpoint).toBe("T0");
136160
act(() => triggerObserverCb({ contentRect: { width: 99 } }));
@@ -144,7 +168,9 @@ describe("useDimensions", () => {
144168

145169
it("should return entry correctly", () => {
146170
const { result } = renderHelper();
147-
result.current.observe(target);
171+
act(() => {
172+
result.current.observe(target);
173+
});
148174
expect(result.current.entry).toBeUndefined();
149175

150176
const e = { contentRect: { width: 100, height: 100 } };
@@ -161,7 +187,9 @@ describe("useDimensions", () => {
161187
it("should trigger onResize without breakpoints", () => {
162188
const onResize = jest.fn();
163189
const { result } = renderHelper({ onResize });
164-
result.current.observe(target);
190+
act(() => {
191+
result.current.observe(target);
192+
});
165193
const contentRect = { width: 100, height: 100 };
166194
act(() => triggerObserverCb({ contentRect }));
167195
expect(onResize).toHaveBeenCalledWith({
@@ -180,7 +208,9 @@ describe("useDimensions", () => {
180208
breakpoints: { T0: 0, T1: 100 },
181209
onResize,
182210
});
183-
result.current.observe(target);
211+
act(() => {
212+
result.current.observe(target);
213+
});
184214
const contentRect = { width: 50, height: 100 };
185215
act(() => {
186216
triggerObserverCb({ contentRect });
@@ -202,7 +232,9 @@ describe("useDimensions", () => {
202232
breakpoints: { T0: 100, T1: 200 },
203233
updateOnBreakpointChange: true,
204234
});
205-
result.current.observe(target);
235+
act(() => {
236+
result.current.observe(target);
237+
});
206238
act(() => triggerObserverCb({ contentRect: { width: 50 } }));
207239
expect(result.current.width).toBe(0);
208240
act(() => triggerObserverCb({ contentRect: { width: 100 } }));
@@ -211,9 +243,11 @@ describe("useDimensions", () => {
211243

212244
it("should update state conditionally", () => {
213245
const { result } = renderHelper({
214-
shouldUpdate: ({ width }) => width > 300,
246+
shouldUpdate: ({ width }) => (width ?? 0) > 300,
247+
});
248+
act(() => {
249+
result.current.observe(target);
215250
});
216-
result.current.observe(target);
217251
act(() => triggerObserverCb({ contentRect: { width: 100 } }));
218252
expect(result.current.width).toBe(0);
219253
act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -226,16 +260,20 @@ describe("useDimensions", () => {
226260
let { result } = renderHelper({
227261
updateOnBreakpointChange: true,
228262
});
229-
result.current.observe(target);
263+
act(() => {
264+
result.current.observe(target);
265+
});
230266
act(() => triggerObserverCb({ contentRect: { width: 50 } }));
231267
expect(result.current.width).toBe(50);
232268

233269
result = renderHelper({
234270
breakpoints: { T0: 100, T1: 200 },
235271
updateOnBreakpointChange: true,
236-
shouldUpdate: ({ width }) => width > 300,
272+
shouldUpdate: ({ width }) => (width ?? 0) > 300,
237273
}).result;
238-
result.current.observe(target);
274+
act(() => {
275+
result.current.observe(target);
276+
});
239277
act(() => triggerObserverCb({ contentRect: { width: 100 } }));
240278
expect(result.current.width).toBe(0);
241279
act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -271,7 +309,9 @@ describe("useDimensions", () => {
271309
// @ts-ignore
272310
delete global.ResizeObserverEntry;
273311
const { result } = renderHelper({ polyfill: mockResizeObserver });
274-
result.current.observe(target);
312+
act(() => {
313+
result.current.observe(target);
314+
});
275315
expect(observe).toHaveBeenCalledTimes(1);
276316
});
277317
});

‎src/index.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const borderBoxWarn =
99

1010
interface State {
1111
readonly currentBreakpoint: string;
12-
readonly width: number;
13-
readonly height: number;
12+
readonly width: number | null;
13+
readonly height: number | null;
1414
readonly entry?: ResizeObserverEntry;
1515
}
1616
interface Observe<T> {
@@ -66,8 +66,8 @@ const useDimensions = <T extends HTMLElement | null>({
6666
}: Options<T> = {}): Return<T> => {
6767
const [state, setState] = useState<State>({
6868
currentBreakpoint: "",
69-
width: 0,
70-
height: 0,
69+
width: null,
70+
height: null,
7171
});
7272
const prevSizeRef = useRef<{ width?: number; height?: number }>({});
7373
const prevBreakpointRef = useRef<string>();
@@ -86,6 +86,11 @@ const useDimensions = <T extends HTMLElement | null>({
8686
if (element && element !== ref.current) {
8787
unobserve();
8888
ref.current = element;
89+
setState({
90+
currentBreakpoint: "",
91+
width: element.clientWidth,
92+
height: element.clientHeight,
93+
});
8994
}
9095
if (observerRef.current && ref.current)
9196
observerRef.current.observe(ref.current as HTMLElement);

0 commit comments

Comments
 (0)