react-adaptive-hooks

React Adaptive Loading Hooks

Give users a great experience best suited to their device and network constraints.

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

• Network - 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 can help you give users a great experience best suited to their device and network constraints.

Installation

npm i react-adaptive-hooks --save

Usage

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

import { useNetworkStatus } from './network';
import { useSaveData } from './save-data';
import { useHardwareConcurrency } from './hardware-concurrency';
import { useMemoryStatus } from './memory';

and then use them

Network

useNetworkStatus React hook for getting network status (effective connection type)

import React from 'react';

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

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

  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img src='...' alt='low resolution' />;
      break;
    case '2g':
      media = <img src='...' alt='medium resolution' />;
      break;
    case '3g':
      media = <img src='...' alt='high resolution' />;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }
  
  return <div>{media}</div>;
};

Save Data

useSaveData React hook for getting Save Data whether it's Lite mode enabled or not

import React from 'react';

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

const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    <div>
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

CPU Cores / Hardware Concurrency

useHardwareConcurrency React hook for getting the number of logical CPU processor cores of the user's device

import React from 'react';

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

const MyComponent = () => {
  const { numberOfLogicalProcessors } = useHardwareConcurrency();
  return (
    <div>
      { numberOfLogicalProcessors <= 4 ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

Memory

useMemoryStatus React hook for getting memory status of the device

import React from 'react';

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

const MyComponent = () => {
  const { deviceMemory } = useMemoryStatus();
  return (
    <div>
      { deviceMemory < 4 ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

Browser Support

• Network Information API - effectiveType is available in Chrome 61+, Opera 48+, Edge 76+, Chrome for Android 76+, Firefox for Android 68+

• Save Data API is available in Chrome 65+, Opera 62+, Chrome for Android 76+, Opera for Android 46+

• Hardware Concurrency API is available in Chrome 37+, Safari 10.1+, Firefox 48+, Opera 24+, Edge 15+, Chrome for Android 76+, Safari on iOS 10.3+, Firefox for Android 68+, Opera for Android 46+

• Performance memory API is a non-standard and only available in Chrome 7+, Opera, Chrome for Android 18+, Opera for Android

• Device Memory API is available in Chrome 63+, Opera 50+, Chrome for Android 76+, Opera for Android 46+

Demos

Network

• Network-aware loading with create-react-app (Live)

• Network-aware code-splitting with create-react-app (Live)

• Network-aware data-fetching with create-react-app (Live)

• React Movie - network-aware loading (Live)

• React Shrine - network-aware code-splitting (Live)

• React eBay - network-aware code-splitting (Live)

• React Lottie - network-aware loading (Live)

Save Data

• React Twitter - save-data loading based on Client Hint (Live)
• React Twitter - save-data loading based on Hook (Live)

CPU Cores / Hardware Concurrency

• Hardware concurrency considerate code-splitting with create-react-app (Live)
• Hardware concurrency considerate loading with create-react-app (Live)

Memory

• Memory considerate loading with create-react-app (Live)

• Memory considerate loading (SketchFab version) with create-react-app (Live)

• Memory-considerate animation-toggling with create-next-app (Live)

• React Dixie Mesh - memory considerate loading (Live)

References

• Adaptive serving based on network quality
• Adaptive Serving using JavaScript and the Network Information API
• Serving Adaptive Components Using the Network Information API

License

Licensed under the Apache-2.0 license.

Team

This project is brought to you by Addy Osmani and Anton Karlovskiy.