fix: useBreakpoint NextJs warning

apps/docs/package.json

@@ -10,7 +10,7 @@
     "clean": "rimraf .turbo && rimraf node_modules && rimraf .next"
   },
   "dependencies": {
-    "@react-awesome/components": "1.0.17",
+    "@react-awesome/components": "1.0.18",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.315.0",

apps/docs/src/pages/docs/use-breakpoint.mdx

@@ -25,7 +25,8 @@ import { useBreakpoint } from '@react-awesome/components'
 export const Example = () => {
   const [ref, setRef] = useState(null)
 
-const { currentBreakpoint } = useBreakpoint(ref, {
+const { currentBreakpoint } = useBreakpoint({
+containerEl: ref,
 breakpoints: {
 sm: 320,
 md: 480,
@@ -56,7 +57,9 @@ import { useBreakpoint } from '@react-awesome/use-breakpoint'
 const Example = () => {
   const ref = useRef(null)
 
-  const { currentBreakpoint } = useBreakpoint(ref.current)
+  const { currentBreakpoint } = useBreakpoint({
+    containerEl: ref.current,
+  })
 
   return (
     <div ref={ref}>
@@ -71,7 +74,8 @@ const Example = () => {
 export const ExampleWithCustomConfig = () => {
   const [ref, setRef] = useState(null)
 
-const { currentBreakpoint } = useBreakpoint(ref, {
+const { currentBreakpoint } = useBreakpoint({
+containerEl: ref,
 breakpoints: {
 "📱": 320,
 "💻": 480,
@@ -99,7 +103,8 @@ import { useBreakpoint } from '@react-awesome/use-breakpoint'
 const Example = () => {
   const ref = useRef(null)
 
-  const { currentBreakpoint } = useBreakpoint(ref.current, {
+  const { currentBreakpoint } = useBreakpoint({
+    containerEl: ref.current,
     breakpoints: {
       '📱': 320,
       '💻': 480,
@@ -128,7 +133,8 @@ const Example = () => {
 export const ExampleUseUtilities = () => {
   const [ref, setRef] = useState(null)
 
-const { smaller } = useBreakpoint(ref, {
+const { smaller } = useBreakpoint({
+containerEl: ref,
 breakpoints: {
 sm: 320,
 md: 480,
@@ -157,7 +163,9 @@ import { useBreakpoint } from '@react-awesome/use-breakpoint'
 const Example = () => {
   const ref = useRef(null)
 
-  const { smaller } = useBreakpoint(ref.current)
+  const { smaller } = useBreakpoint({
+    containerEl: ref.current,
+  })
 
   return (
     <div ref={setRef}>
@@ -176,7 +184,8 @@ export const ExampleWithCallback = () => {
   const [ref, setRef] = useState(null)
   const [background, setBg] = useState('red')
 
-useBreakpoint(ref, {
+useBreakpoint({
+containerEl: ref,
 breakpoints: {
 sm: 320,
 md: 480,
@@ -215,7 +224,8 @@ const Example = () => {
   const ref = useRef(null)
   const [background, setBg] = useState('red')
 
-  useBreakpoint(ref, {
+  useBreakpoint({
+    containerEl: ref,
     breakpoints: {
       sm: 320,
       md: 480,
@@ -230,7 +240,7 @@ const Example = () => {
 
   return (
     <>
-      <div ref={setRef}>
+      <div ref={ref}>
         <p> The background will change when container's size is changed</p>
       </div>
       <div
@@ -247,16 +257,17 @@ const Example = () => {
 
 The `useBreakpoint` takes the following parameters:
 
-#### `containerEl`
-
-- Type: `HTMLElement`
-
 #### `Options`
 
 - Type: `UseBreakpointOpts`
 
 ## API
 
+#### `containerEl`
+
+- Type: `HTMLElement`
+- Default: `window.document.body`
+
 #### `currentBreakpoint`
 
 - Type: `string`

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.18
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/use-breakpoint@1.0.0
+
 ## 1.0.17
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/components",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -45,6 +45,6 @@
     "@react-awesome/use-selection-range": "0.0.3",
     "@react-awesome/use-previous": "0.0.3",
     "@react-awesome/use-toggle": "0.0.1",
-    "@react-awesome/use-breakpoint": "0.0.2"
+    "@react-awesome/use-breakpoint": "1.0.0"
   }
 }

packages/use-breakpoint/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-awesome/use-breakpoint
 
+## 1.0.0
+
+### Major Changes
+
+- fix warning in next.js
+
 ## 0.0.2
 
 ### Patch Changes

packages/use-breakpoint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/use-breakpoint",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/use-breakpoint/src/useBreakpoint/useBreakpoint.spec.tsx

@@ -24,13 +24,21 @@ describe('useBreakpoint', () => {
   })
 
   it('Should do nothing when element is null', async () => {
-    const { unmount } = renderHook(() => useBreakpoint(null))
+    const { unmount } = renderHook(() =>
+      useBreakpoint({
+        containerEl: null,
+      }),
+    )
 
     expect(MockObserverInstance.observe).not.toHaveBeenCalled()
   })
 
   it('Should observe resize event on passed element', async () => {
-    const { unmount } = renderHook(() => useBreakpoint(mockEl))
+    const { unmount } = renderHook(() =>
+      useBreakpoint({
+        containerEl: mockEl,
+      }),
+    )
 
     expect(MockObserverInstance.observe).toHaveBeenCalled()
 
@@ -43,7 +51,8 @@ describe('useBreakpoint', () => {
     try {
       console.error = vitest.fn()
       renderHook(() =>
-        useBreakpoint(mockEl, {
+        useBreakpoint({
+          containerEl: mockEl,
           breakpoints: {
             sm: 1,
             md: 1,
@@ -74,7 +83,8 @@ describe('useBreakpoint', () => {
     })
 
     renderHook(() =>
-      useBreakpoint(mockEl, {
+      useBreakpoint({
+        containerEl: mockEl,
         callbacks: {
           sm: mockCallback,
         },
@@ -99,7 +109,8 @@ describe('useBreakpoint', () => {
     })
 
     renderHook(() =>
-      useBreakpoint(mockEl, {
+      useBreakpoint({
+        containerEl: mockEl,
         callbacks: {
           lg: mockCallback,
         },
@@ -124,7 +135,8 @@ describe('useBreakpoint', () => {
     })
 
     renderHook(() =>
-      useBreakpoint(mockEl, {
+      useBreakpoint({
+        containerEl: mockEl,
         callbacks: {
           '2xl': mockCallback,
         },

packages/use-breakpoint/src/useBreakpoint/useBreakpoint.tsx

@@ -60,20 +60,22 @@ export type UseBreakpointOpts<
   callbacks?: Partial<UseBreakpointCallbacks<B>>
   fallbackValue?: keyof B
   useResizeObserver?: boolean
+  containerEl?: HTMLElement | null
 }
 
 export function useBreakpoint<B extends Record<string, number>>(
-  containerEl: HTMLElement | null,
   opts: UseBreakpointOpts<B> = {},
 ): { currentBreakpoint?: keyof B } & UseBreakpointUtils<B> {
   const {
     breakpoints: BPS = DEFAULT_BREAKPOINTS,
     callbacks,
     fallbackValue,
+    containerEl,
   } = opts
   const [currentBreakpoint, setCurrentBreakpoint] = useState<
     keyof typeof BPS | undefined
   >(fallbackValue as keyof typeof BPS)
+  const [el, setEl] = useState<HTMLElement | null>(null)
 
   const BPS_VALUES_ARR = useMemo(
     () => Object.values(BPS).sort((a, b) => a - b),
@@ -117,7 +119,12 @@ export function useBreakpoint<B extends Record<string, number>>(
   )
 
   useEffect(() => {
-    if (!containerEl) return
+    if (typeof containerEl === 'undefined') setEl(window.document.body)
+    else if (containerEl !== el) setEl(containerEl)
+  }, [containerEl, el])
+
+  useEffect(() => {
+    if (!el) return
 
     const callback = (entries: ResizeObserverEntry[]) => {
       const [entry] = entries
@@ -132,20 +139,20 @@ export function useBreakpoint<B extends Record<string, number>>(
 
     const resizeObserver = new ResizeObserver(callback)
 
-    resizeObserver.observe(containerEl)
+    resizeObserver.observe(el)
 
     return () => {
       resizeObserver.disconnect()
     }
-  }, [callbacks, containerEl, determineCurrentBreakpoint])
+  }, [callbacks, determineCurrentBreakpoint, el])
 
   // @ts-expect-error
   return {
     currentBreakpoint,
-    smaller: smaller(BPS, containerEl),
-    smallerOrEqual: smallerOrEqual(BPS, containerEl),
-    greater: greater(BPS, containerEl),
-    greaterOrEqual: greaterOrEqual(BPS, containerEl),
-    between: between(BPS, containerEl),
+    smaller: smaller(BPS, el),
+    smallerOrEqual: smallerOrEqual(BPS, el),
+    greater: greater(BPS, el),
+    greaterOrEqual: greaterOrEqual(BPS, el),
+    between: between(BPS, el),
   }
 }