@silicon.js/network

A lightweight and customizable network manager for React Native applications using React Context.

Features

• 🚀 Easy to use: Plug and play network monitoring
• ⚡ Performance: Optimized with memoization
• 🐌 Slow Network Detection: Automatically detects slow connections
• 🔧 Hooks: useNetwork and useNetworkContext for custom implementations
• 📱 Responsive: Works on all devices (iOS & Android)

Installation

npm install @silicon.js/network @react-native-community/netinfo

Quick Start

1. Wrap your application with NetworkProvider:

import { NetworkProvider, useNetwork } from '@silicon.js/network';

function App() {
  // Optional: autoClearMs (default 3000ms) - time to wait before clearing "slow" status
  const networkMethods = useNetwork(3000);

  return (
    <NetworkProvider methods={networkMethods}>
      <YourApp />
    </NetworkProvider>
  );
}

2. Use useNetworkContext to access network state:

import { useNetworkContext } from '@silicon.js/network';

function YourComponent() {
  const { state, actions } = useNetworkContext();

  return (
    <View>
      <Text>Connected: {state.isConnected ? 'Yes' : 'No'}</Text>
      {state.isSlow && <Text>Network is slow!</Text>}
      {state.responseTime && <Text>Response time: {state.responseTime}ms</Text>}
      <Button onPress={actions.checkConnectivity} title="Check Connection" />
    </View>
  );
}

API Reference

NetworkProvider

Provider component that shares the network state and methods.

| Prop | Type | Description | | ---------- | -------------------- | --------------------------------- | | methods | NetworkContextType | Return value of useNetwork hook | | children | ReactNode | Child components |

useNetwork

Hook to manage the network logic.

const networkMethods = useNetwork(3000);

Parameters

| Parameter | Type | Default | Description | | ------------- | -------- | ------- | ------------------------------------------------ | | autoClearMs | number | 3000 | Time in ms to wait before clearing "slow" status |

Returns

Returns an object with the following structure:

{
  state: {
    isConnected: boolean;
    isSlow: boolean;
    responseTime: number | null;
  };
  actions: {
    checkConnectivity: () => Promise<void>;
    setIsConnected: (isConnected: boolean) => void;
    setIsSlow: (isSlow: boolean) => void;
    setResponseTime: (responseTime: number | null) => void;
  };
}

State Properties:

| Property | Type | Description | | -------------- | ----------------- | ------------------------------ | | isConnected | boolean | Whether the device is connected | | isSlow | boolean | Whether the connection is slow | | responseTime | number \| null | Response time of last check (ms) |

Action Methods:

| Method | Type | Description | | ------------------- | -------------------------------------- | ------------------------------- | | checkConnectivity | () => Promise<void> | Manually trigger connectivity check | | setIsConnected | (isConnected: boolean) => void | Manually set connection status | | setIsSlow | (isSlow: boolean) => void | Manually set slow network status | | setResponseTime | (responseTime: number \| null) => void | Manually set response time |

useNetworkContext

Hook to access the network state and actions from any component within the provider.

const { state, actions } = useNetworkContext();

License

ISC