use-internet-connection-status 0.0.1

package/README.md

@@ -0,0 +1,178 @@
+# useInternetConnectionStatus
+
+A React hook to detect the user's internet connection status.
+
+## How it works
+
+The hook uses the browser's native APIs to detect connectivity:
+
+1. **Initial state**: Reads `navigator.onLine` to get the current connection status
+2. **Events**: Listens to the `online` and `offline` events on the global object (`globalThis`)
+3. **Synchronization**: When connectivity changes, the state is updated
+
+The hook returns an object with the `online` property (boolean) that indicates whether the user is connected to the internet.
+
+## Requirements
+
+- **Node.js**: >= 22
+- **React**: >= 19.2.4
+
+> The hook may work with earlier React versions, but React 19.2.4 is recommended as it includes security patches for [CVE-2025-55184 and CVE-2025-67779](https://react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components). If your app’s React code does not use a server, your app is not affected by this vulnerability.
+
+## Installation
+
+```bash
+bun install
+```
+
+### What is `--ignore-scripts`?
+
+During installation, some packages may run post-installation scripts. If you don't need these features or want a faster installation, you can use:
+
+```bash
+bun install --ignore-scripts
+```
+
+In this project, `--ignore-scripts` is enabled by default for security.
+
+This skips all post-installation scripts. Use it when:
+- You only need the JavaScript/TypeScript code
+- You want to speed up the installation process
+- The scripts are not necessary for your use case
+
+## Available Scripts
+
+| Script | Command | Description |
+|--------|---------|-------------|
+| Install dependencies | `bun install` | Installs all project dependencies |
+| Build | `bun run build` | Compiles the project using Rollup |
+| Development | `bun run dev` | Compiles in watch mode (automatically recompiles when detecting changes) |
+
+### Build
+
+Generates CommonJS and ES Modules files in the `dist/` folder:
+
+```bash
+bun run build
+```
+
+### Development (Watch mode)
+
+Automatically compiles whenever changes are detected in the code:
+
+```bash
+bun run dev
+```
+
+## Project Configuration
+
+This project includes security and best practice configurations in the following files:
+
+### `.npmrc`
+
+Configuration file for npm/bun:
+
+```ini
+ignoreScripts = true    # Prevents scripts from running during installation
+engine-strict = true    # Fails if Node version doesn't satisfy the engines field in package.json
+audit = true            # Reports vulnerabilities in dependencies after installation
+minimumReleaseAge = 10080 # Prevents installing packages released in the last 7 days
+```
+
+### `bunfig.toml`
+
+Bun-specific configuration file:
+
+```toml
+[install]
+ignoreScripts = true    # Prevents scripts from running during installation
+audit = true            # Reports vulnerabilities in dependencies
+
+[install.engines]
+strict = true           # Strict engine version (Node >= 22)
+
+[install.resolution]
+minimumReleaseAge = "7d" # Prevents installing packages released in the last 7 days
+```
+
+### Configuration Explanation
+
+| Configuration | File | What it does |
+|--------------|------|--------------|
+| `ignoreScripts` | .npmrc, bunfig.toml | Prevents malicious scripts from running during `bun install`. Improves security. |
+| `engine-strict` | .npmrc | Requires Node.js version to meet `engines` in package.json (>= 22). Prevents incompatible versions. |
+| `audit` | .npmrc, bunfig.toml | After installing, shows a summary of known vulnerabilities in dependencies. |
+| `strict` | bunfig.toml | Strict engine version for bun (equivalent to engine-strict). |
+| `minimumReleaseAge` | .npmrc, bunfig.toml | Prevents installing packages released in the last 7 days. Avoids vulnerabilities in new packages. |
+
+### `.npmignore`
+
+File that specifies which files are excluded from the published npm package:
+
+```
+node_modules/       # Dependencies (already included in install)
+src/                # Source code (already compiled to dist/)
+rollup.config.js    # Build configuration
+tsconfig.json       # TypeScript configuration
+bunfig.toml         # Bun configuration
+.git/               # Git folder
+bun.lock            # Bun lock file
+*.md                # Documentation (except README)
+```
+
+Only published to npm: `dist/`, `package.json`, `README.md` and `README-en.md`.
+
+## React Usage Example
+
+```tsx
+import { useInternetConnectionStatus } from 'use-internet-connection-status'
+
+function App() {
+  const { online } = useInternetConnectionStatus()
+
+  return (
+    <div>
+      <h1>Connection Status</h1>
+      {online ? (
+        <p>✅ You are connected to the internet</p>
+      ) : (
+        <p>❌ No internet connection</p>
+      )}
+    </div>
+  )
+}
+
+export default App
+```
+
+### Example with fallback message
+
+```tsx
+import { useInternetConnectionStatus } from 'use-internet-connection-status'
+
+function NetworkStatus() {
+  const { online } = useInternetConnectionStatus()
+
+  if (!online) {
+    return (
+      <div style={{ padding: '1rem', backgroundColor: '#fee2e2' }}>
+        ⚠️ You have disconnected from the internet. Some features may not be available.
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '1rem', backgroundColor: '#dcfce7' }}>
+      🌐 Connected
+    </div>
+  )
+}
+```
+
+## API
+
+### Returns
+
+| Property | Type | Description |
+|-----------|------|-------------|
+| `online` | `boolean` | `true` if there is an internet connection, `false` otherwise |

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useInternetConnectionStatus=function(){const[n,t]=e.useState(navigator.onLine),i=async()=>t(navigator.onLine);return e.useEffect(()=>(globalThis.addEventListener("online",i),globalThis.addEventListener("offline",i),()=>{globalThis.removeEventListener("online",i),globalThis.removeEventListener("offline",i)}),[]),{online:n}};
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useInternetStatus.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\r\n\r\nexport default function useInternetConnectionStatus() {\r\n  const [online, setOnline] = useState(navigator.onLine)\r\n\r\n  const handleOnlineStatus = async () => setOnline(navigator.onLine)\r\n\r\n  useEffect(() => {\r\n    globalThis.addEventListener('online', handleOnlineStatus)\r\n    globalThis.addEventListener('offline', handleOnlineStatus)\r\n\r\n    return () => {\r\n      globalThis.removeEventListener('online', handleOnlineStatus)\r\n      globalThis.removeEventListener('offline', handleOnlineStatus)\r\n    }\r\n  }, [])\r\n\r\n  return { online }\r\n}\r\n"],"names":["online","setOnline","useState","navigator","onLine","handleOnlineStatus","async","useEffect","globalThis","addEventListener","removeEventListener"],"mappings":"wEAEc,WACZ,MAAOA,EAAQC,GAAaC,EAAAA,SAASC,UAAUC,QAEzCC,EAAqBC,SAAYL,EAAUE,UAAUC,QAY3D,OAVAG,EAAAA,UAAU,KACRC,WAAWC,iBAAiB,SAAUJ,GACtCG,WAAWC,iBAAiB,UAAWJ,GAEhC,KACLG,WAAWE,oBAAoB,SAAUL,GACzCG,WAAWE,oBAAoB,UAAWL,KAE3C,IAEI,CAAEL,SACX"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import{useState as n,useEffect as e}from"react";function o(){const[o,i]=n(navigator.onLine),t=async()=>i(navigator.onLine);return e(()=>(globalThis.addEventListener("online",t),globalThis.addEventListener("offline",t),()=>{globalThis.removeEventListener("online",t),globalThis.removeEventListener("offline",t)}),[]),{online:o}}export{o as useInternetConnectionStatus};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useInternetStatus.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\r\n\r\nexport default function useInternetConnectionStatus() {\r\n  const [online, setOnline] = useState(navigator.onLine)\r\n\r\n  const handleOnlineStatus = async () => setOnline(navigator.onLine)\r\n\r\n  useEffect(() => {\r\n    globalThis.addEventListener('online', handleOnlineStatus)\r\n    globalThis.addEventListener('offline', handleOnlineStatus)\r\n\r\n    return () => {\r\n      globalThis.removeEventListener('online', handleOnlineStatus)\r\n      globalThis.removeEventListener('offline', handleOnlineStatus)\r\n    }\r\n  }, [])\r\n\r\n  return { online }\r\n}\r\n"],"names":["useInternetConnectionStatus","online","setOnline","useState","navigator","onLine","handleOnlineStatus","async","useEffect","globalThis","addEventListener","removeEventListener"],"mappings":"gDAEc,SAAUA,IACtB,MAAOC,EAAQC,GAAaC,EAASC,UAAUC,QAEzCC,EAAqBC,SAAYL,EAAUE,UAAUC,QAY3D,OAVAG,EAAU,KACRC,WAAWC,iBAAiB,SAAUJ,GACtCG,WAAWC,iBAAiB,UAAWJ,GAEhC,KACLG,WAAWE,oBAAoB,SAAUL,GACzCG,WAAWE,oBAAoB,UAAWL,KAE3C,IAEI,CAAEL,SACX"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "use-internet-connection-status",
+  "description": "A React hook to check the internet status of the user.",
+  "version": "0.0.1",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adv2028/use-internet-connection-status.git"
+  },
+  "bugs": {
+    "url": "https://github.com/adv2028/use-internet-connection-status/issues"
+  },
+  "homepage": "https://github.com/adv2028/use-internet-connection-status#readme",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "peerDependencies": {
+    "typescript": "^6.0.2",
+    "react": "^19.2.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/bun": "latest",
+    "react": "^19.2.4",
+    "@types/react": "^19.2.14",
+    "rollup": "^4.60.0",
+    "rollup-plugin-dts": "^6.4.1",
+    "tslib": "^2.8.1"
+  },
+  "engines": {
+    "node": ">=22",
+    "npm": ">=11.12.1"
+  },
+  "license": "MIT",
+  "author": "Antonella Di Virgilio"
+}