chore: merge PR#14 from AmrAhmedA/dev

fix: box model style

example/src/App.tsx

@@ -1,15 +1,15 @@
-import Alert from '@mui/material/Alert'
-import Container from '@mui/material/Container'
-import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid'
-import Stack from '@mui/material/Stack'
-import { useReducer, useState } from 'react'
 import { OnlineStatusNotification, useOnlineStatus } from '../../src/nsn'
 import './App.css'
 import { AppBarContainer } from './components/AppBar'
 import { InfoModal } from './components/InfoModal'
 import { DarkModeContainer } from './components/darkMode'
 import { PositionContainer } from './components/position'
+import Alert from '@mui/material/Alert'
+import Container from '@mui/material/Container'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
+import { useReducer, useState } from 'react'
 
 type ReducerActions = {
   type:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-nsn",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "private": false,
   "description": "A very lightweight and customizable online network status notification built for react apps.",
   "license": "MIT",

src/App.css

@@ -25,6 +25,7 @@
 .statusNotification {
   align-items: center;
   border-radius: 8px;
+  box-sizing: content-box;
   direction: ltr;
   display: flex;
   height: 48px;

src/OnlineStatusNotification.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useEffect } from 'react'
-import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import './App.css'
 import { useFirstRender } from './hooks'
 import { closeIcon, offlineIcon, onlineIcon } from './icons'
+import React, { forwardRef, useEffect } from 'react'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 type StatusText = {
   online?: string
@@ -190,6 +190,8 @@ export const OnlineStatusNotification = React.memo(
   OnlineStatusNotificationComponent
 )
 
+export default OnlineStatusNotification
+
 const getStatusText = (isOnline: boolean, statusText: StatusText): string =>
   isOnline
     ? statusText?.online ?? DefaultOnlineText

src/hooks.tsx

@@ -1,3 +1,4 @@
+import { DEFAULT_POLLING_URL, timeSince } from './utils'
 import {
   useCallback,
   useEffect,
@@ -6,7 +7,6 @@ import {
   useRef,
   useState
 } from 'react'
-import { DEFAULT_POLLING_URL, timeSince } from './utils'
 
 const isWindowDocumentAvailable = typeof window !== 'undefined'
 
@@ -22,7 +22,9 @@ function getConnectionInfo() {
 }
 
 const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+  typeof window !== 'undefined' || typeof navigator !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
 
 type OnlineStatusProps = {
   pollingUrl?: string

src/nsn.ts

@@ -1,2 +1,2 @@
-export { OnlineStatusNotification } from './OnlineStatusNotification'
+export { default as OnlineStatusNotification } from './OnlineStatusNotification'
 export { useOnlineStatus } from './hooks'