useBreakpoint

Requirements

• Implement useBreakpoint(breakpoints), where breakpoints is a record of names to distinct nonnegative finite minimum widths in pixels. Example: { small:0, medium:768, large:1024 }. The map may be supplied in any key order.
• Select the name whose minimum width is the largest value less than or equal to window.innerWidth. Return undefined for an empty map or when width is below every minimum. Exact threshold matches select that breakpoint.
• Initialize the result from the current window width, then react to window resize events using real React state. Resizing within the same range keeps the same name.
• Use the latest breakpoint map after rerender, even without another resize. Remove old subscriptions when dependencies change and remove the listener on unmount. Strict Mode replay must leave one active subscription per instance.
• Each instance has independent thresholds. During server rendering, where window is unavailable, return undefined without reading browser APIs. No HTML/CSS implementation or debouncing is required.

Examples

Input: useBreakpoint({small:0,medium:768,large:1024}); // window width is 900
Output: "medium"

Input: useBreakpoint({desktop:1024}); // width is 800
Output: undefined