{"repo":"GoogleChromeLabs/react-adaptive-hooks","free":true,"listed":false,"github":"https://github.com/GoogleChromeLabs/react-adaptive-hooks","clone":"git clone https://github.com/GoogleChromeLabs/react-adaptive-hooks.git","description":"Deliver experiences best suited to a user's device and network constraints","language":"JavaScript","stars":5157,"topics":["react-hooks","performance","loading","react","adaptive-loading","network","memory","cpu"],"license":"Apache-2.0","category":"ui-components","readme_excerpt":"React Adaptive Loading Hooks & Utilities · 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 Media Capabilities API 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: and then use them in your components. Examples for each hook and utility can be found below: Network useNetworkStatus React hook for adapting based on network status (effective connection type) 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. Save Dat","default_branch":null,"files":null,"tree":[],"storefront":"/r/GoogleChromeLabs","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/GoogleChromeLabs/react-adaptive-hooks/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}