@deep-foundation/capacitor-network

npm Gitpod Discord

Provides links&functions based on @capacitor/network.

Documentation

List of links

NetworkStatus

The NetworkStatus link serves as a container for link structure representing network status inside deep. You need only one container link per deep instance.

Prerequisitions

  • Install this package in your deep by using npm-packager
  • Provide permissions to this package

Library Usage

  1. Import the library into your TypeScript project:
import Network from "@deep-foundation/capacitor-network";
  1. Create container link of type NetworkStatus to store Network state:
const containerLinkId = await Network.createContainer(deep:DeepClient)

You can also create it manually inside your deepcase client. Open Insert menu, search for and then insert "NetworkStatus" type link.

  1. Save&Upload network status:

Call saveNetworkStatus function and pass an empty array as connectionStatuses to automatically get current network state and upload data as links to your deep instance.

await Network.saveNetworkStatus({ deep, containerLinkId, connectionStatuses: [] })
  1. Get current status of the network as NetworkStatusType from your deep instance:

Call getCurrentStatus function and pass your deep instance with container link ID.

await Network.getCurrentStatus({ deep, containerLinkId })

React Usage

  1. Import NetworkStatus react component or hooks:
import { WithNetworkStatus, NetworkStatus, useNetworkStatus, useCurrentStatus, useContainer } from "@deep-foundation/capacitor-network";
  1. Create NetworkStatus component instance inside your deep app and pass a DeepClient instance.
function Page() {
return <NetworkStatus deep={useDeep()} />
}

You will see basic ui with all package functionality.

Or use WithNetworkStatus Component like that:

<WithNetworkStatus deep={yourDeepInstance} containerLinkId={yourContainerLinkId}>
<NetworkStatus />
</WithNetworkStatus>
  1. Custom hooks can be used anywhere in your deep app:

useNetworkStatus() hook for managing network event listeners from @capacitor/network and store event data when device is offline.

const { connectionStatuses, subscribeToNetworkStatusChanges } = useNetworkStatus({ deep, containerLinkId });

useCurrentStatus() hook to get current status of the network from your deep instance and handler function to refetch current state when needed.

const { currentStatus, loadCurrentStatus } = useCurrentStatus({ deep, containerLinkId });

useContainer() hook to get existing or create a new container link ID.

const containerLinkId = useContainer(deep);

Contribution

Feel free to contribute. Please fork the repository and submit a pull request for any bugs, improvements, or features.