network-connectivity v1.0.0

Network Connectivity

A lightweight package for detecting and monitoring network connectivity in web applications.

Getting Started

Install the package:

Using npm:

$ npm install --save network-connectivity

Using Yarn:

$ yarn add network-connectivity

API Reference

ConnectionBanner Component

The ConnectionBanner component is designed to display online and offline status banners with customizable content. It accepts the following props:

Props

CSS Class Names

The ConnectionBanner component supports custom styling through CSS class names. You can use the className prop to apply additional class names to the component. The component itself applies the following class names:

• connection-banner: The base class name for the ConnectionBanner component.
• connection-banner-online: Applied when the device is online.
• connection-banner-offline: Applied when the device is offline.

Example Usage

Here's an example of how you can use the ConnectionBanner component with some custom props:

import { ConnectionBanner } from 'network-connectivity';

const MyComponent = () => {
  return (
    <div>
      <ConnectionBanner alwaysShowBanner={true} />
    </div>
  )
}

useConnection Hook

The useConnection hook allows you to access the network connectivity status within your React components. It returns an object with the following properties:

• isOnline: A boolean value indicating whether the device is currently online.

Example Usage

import { useConnection } from 'network-connectivity';

const MyComponent = () => {
  const { isOnline } = useConnection();

  return (
    <div>
      <p>Is online: {isOnline ? 'Yes' : 'No'}</p>
    </div>
  );
}

isOnline Function

The isOnline function is a utility function provided by the network-connectivity package. It allows you to programmatically check the network connectivity status.

Example Usage

import { isOnline } from 'network-connectivity';

if (isOnline()) {
  console.log('You are online!');
} else {
  console.log('You are offline.');
}