How to deliver experiences best suited to a user's device and network constraints in React published 11/27/2019 | 3 min read

Hello everyone, and welcome to a new story. Today I'd like to discuss with you a very interesting open source library "react-adaptive-hooks" which will make it very easy for you to implement awesome features into your app to deliver the best possible experience based on the capabilities of the devices of your audience.

This open source library provided by Google Chrome Labs, it's designed for React. It's currently maintained by 9 open source contributors, lead by Addy Osmani, who's a Speed team lead at Chrome.

Although the project have started 18 days ago (November 9th, 2019), it now have (as of this writing) 3400 stars, 72 forks, 7 issues, and 16 merged pull requests on Github!

What does it provides?

Well, the library gives you 4 primary hooks that will allow you to tailor your users' experience based on the following:

1. Network conditions and effective connection type (slow-2G, 2G, 3G, 4G).
2. Browser's data saving preferences. (load smaller resources)
3. Available device memory. (0.5, 1, 2, 3, 4,... GiB).
4. Device's logical CPU cores. (1, 2, 3, 4,.. cores).

Imagine what you can do with the above capabilities! One use case is as follows:

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

In the above example, we're checking via useSaveData function whether the user's browser have the data saving feature enabled or not, if it's enabled, we'll go ahead and serve an image preview instead of a video which will reduce data consumption, and also provide a faster loading time.

For more usage examples, check the repo's README file.

Installation is simple

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

That's all.

Thanks for reading devspedia, I love you, and I'll see you the next time :)

You may also like reading: