React Adaptive Loading Hooks & Utilities ·   !npm bundle size

> Deliver experiences best suited to a user's device and network constraints (experimental)

This is a suite of React Hooks and utilities for adaptive loading based on a user's:

* Network via effective connection type
* Data Saver preferences
* Device memory
* Logical CPU cores

It can be used to add patterns for adaptive resource loading, data-fetching, code-splitting and capability toggling.

Objective

Make it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.

Installation

npm i react-adaptive-hooks --save or yarn add react-adaptive-hooks

Usage

You can import the hooks you wish to use as follows:

``js
import { useNetworkStatus } from 'react-adaptive-hooks/network';
import { useSaveData } from 'react-adaptive-hooks/save-data';
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
import { useMemoryStatus } from 'react-adaptive-hooks/memory';
`

and then use them in your components. Examples for each hook and utility can be found below:

$3

useNetworkStatus React hook for adapting based on network status (effective connection type)

`js
import React from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const MyComponent = () => {
const { effectiveConnectionType } = useNetworkStatus();

let media;
switch(effectiveConnectionType) {
case 'slow-2g':
media = ;
break;
case '2g':
media = ;
break;
case '3g':
media = ;
break;
case '4g':
media = ;
break;
default:
media = ;
break;
}

return

;
};
`

effectiveConnectionType values can be slow-2g, 2g, 3g, or 4g.

This hook accepts an optional initialEffectiveConnectionType string argument, which can be used to provide a effectiveConnectionType state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass an ECT Client Hint to detect the effective network connection type.

`js
// Inside of a functional React component
const initialEffectiveConnectionType = '4g';
const { effectiveConnectionType } = useNetworkStatus(initialEffectiveConnectionType);
`

$3

useSaveData utility for adapting based on the user's browser Data Saver preferences.

`js
import React from 'react';

import { useSaveData } from 'react-adaptive-hooks/save-data';

const MyComponent = () => {
const { saveData } = useSaveData();
return (



);
};
`

saveData values can be true or false.

This hook accepts an optional initialSaveDataStatus boolean argument, which can be used to provide a saveData state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Save-Data Client Hint that has been converted to a boolean to detect the user's data saving preference.

`js
// Inside of a functional React component
const initialSaveDataStatus = true;
const { saveData } = useSaveData(initialSaveDataStatus);
`

$3

useHardwareConcurrency utility for adapting to the number of logical CPU processor cores on the user's device.

`js
import React from 'react';

import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';

const MyComponent = () => {
const { numberOfLogicalProcessors } = useHardwareConcurrency();
return (



);
};
`

numberOfLogicalProcessors values can be the number of logical processors available to run threads on the user's device.

$3

useMemoryStatus utility for adapting based on the user's device memory (RAM)

`js
import React from 'react';

import { useMemoryStatus } from 'react-adaptive-hooks/memory';

const MyComponent = () => {
const { deviceMemory } = useMemoryStatus();
return (



);
};
`

deviceMemory values can be the approximate amount of device memory in gigabytes.

This hook accepts an optional initialMemoryStatus object argument, which can be used to provide a deviceMemory state value when the user's browser does not support the relevant DeviceMemory API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Device-Memory Client Hint to detect the memory capacity of the user's device.

`js
// Inside of a functional React component
const initialMemoryStatus = { deviceMemory: 4 };
const { deviceMemory } = useMemoryStatus(initialMemoryStatus);
`

$3

#### Code-loading

Deliver a light, interactive core experience to users and progressively add high-end-only features on top, if a user's hardware can handle it. Below is an example using the Network Status hook:

`js
import React, { Suspense, lazy } from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const Full = lazy(() => import(/ webpackChunkName: "full" / './Full.js'));
const Light = lazy(() => import(/ webpackChunkName: "light" / './Light.js'));

const MyComponent = () => {
const { effectiveConnectionType } = useNetworkStatus();
return (


}>
{ effectiveConnectionType === '4g' ? : }