deep-foundation / capacitor-network

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";

2. 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.

3. 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: [] })

4. 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";

2. 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>

3. 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.

capacitor-network's Issues

Add error handling

• Return errors from hooks
• Get renderIfError for With... components

Add hook which subscribes to changes and saves them to deep when network is available

Add hook which subscribes to changes and saves them to deep when network is available

Add possibility to set container link id for NetworkStatus

NetworkStatus has only one parameter - deep, but it is not possible to set container link id where I want my network status to be contained

NetworkStatus is not described well

Section/Content To Improve

React Usage section. Second paragraph.

2. Create NetworkStatus component instance inside your deep app and pass a DeepClient instance.
   function Page() {
   return
   }

What is this component used for? Does it save network status or what? :)

Suggested Improvement

Tell more about why do we need that comopnent

Relevant File(s)

README.md